@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">Editar 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.update', $curso->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="row">
            {{-- Coluna Principal: Curso --}}
            <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 {{ $curso->id }}</h6>
                    </div>
                    <div class="card-body">

                        <div class="form-group">
                            <label for="curso_titulo" class="font-weight-bold">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', $curso->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', $curso->curso_descricao) }}" required>
                            <small class="text-muted">Descrição atual: <code>{{ $curso->curso_descricao }}</code></small>
                            @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="curso_path">Imagem de Capa do Curso (Thumbnail):</label>
                                <input type="file" name="curso_path" id="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>

                        {{-- Preview Híbrido: Começa com a imagem atual e troca se selecionar uma nova --}}
                        <div class="mt-3 mb-3 text-center border rounded p-2 bg-light">
                            <p class="small font-weight-bold mb-2">Imagem Atual / Preview:</p>
                            <img id="imagePreview" src="{{ asset('storage/' . $curso->curso_path) }}"
                                 class="img-fluid img-thumbnail shadow-sm" style="max-height: 180px;">
                        </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', $curso->curso_texto) }}</textarea>
                            @error('curso_texto') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>

                        <div class="form-group">
                            <label for="curso_url" class="font-weight-bold">URL de Destino</label>
                            <input type="text" class="form-control @error('curso_url') is-invalid @enderror"
                                id="curso_url" name="curso_url"
                                value="{{ old('curso_url', $curso->curso_url) }}" required>
                            <small class="text-muted">Link atual: <code>{{ $curso->curso_url }}</code></small>
                            @error('curso_url') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

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

            {{-- Coluna Lateral: Status --}}
            <div class="col-xl-4 col-lg-5">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Status</h6>
                    </div>
                    <div class="card-body">

                        <div class="form-group">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" name="curso_pub" class="custom-control-input" id="curso_pub"
                                    {{ old('curso_pub', $curso->curso_pub) ? 'checked' : '' }}>
                                <label class="custom-control-label font-weight-bold" for="curso_pub">Ativo</label>
                            </div>
                        </div>

                        <hr>

                        <div class="text-right">
                            <button type="submit" class="btn btn-info btn-icon-split shadow-sm">
                                <span class="icon text-white-50">
                                    <i class="fas fa-sync-alt"></i>
                                </span>
                                <span class="text">Atualizar Curso</span>
                            </button>
                        </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