@extends('layouts.appback')

@section('content')
    <div class="container-fluid py-2">
        <div class="row">
            <div class="col-12">
                <div class="card my-4">
                    <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                        <div class="bg-gradient-dark shadow-dark border-radius-lg pt-4 pb-3">
                            <h6 class="text-white text-capitalize ps-3">Nuova promozione</h6>
                        </div>
                    </div>
                    <div class="card-body px-0 pb-2">
                        <div class="table-responsive p-0">

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

                                <div class="col-md-12 p-3">
                                    <div class="input-group input-group-outline my-3">
                                        <label class="form-label">Titolo</label>
                                        <input type="text" name="title" class="form-control"
                                            value="{{ old('title') }}" required>
                                    </div>
                                </div>

                                <div class="col-md-12 p-3">
                                    <div class="input-group input-group-outline my-3">
                                        <label class="form-label">Contenuto</label>
                                        <textarea style="width:100%" rows="120" name="content" id="editor" class="form-control">{{ old('content') }}</textarea>
                                        <button id="showHtmlBtn">Mostra HTML</button>
                                    </div>
                                </div>

                                <div class="col-md-12 p-3">
                                    <div class="input-group input-group-outline my-3">
                                        <p>Immagine principale</p>
                                        <input type="file" name="image" value="Immagine principale"
                                            class="form-control">
                                    </div>
                                </div>

                                <div class="col-md-12 p-3">
                                    <div class="input-group input-group-outline my-3">
                                        <label class="form-label">Azienda</label>
                                        <select name="azienda" id="" class="form-control">
                                            @foreach ($aziende as $azienda)
                                                <option></option>
                                                <option value="">{{ $azienda->nome }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-12 p-3">
                                    <div class="input-group input-group-outline my-3">
                                        <label class="form-label">Cookie e privacy policy</label>
                                        <textarea style="width:100%" rows="12" name="policy" id="editor" class="form-control">{{ old('content') }}</textarea>
                                        <button id="showHtmlBtn">Mostra HTML</button>
                                    </div>
                                </div>

                                <div class="col-md-12 p-3">
                                    <button type="submit" class="btn btn-primary">Salva</button>
                                </div>

                            </form>

                            {{-- CKEditor 5 --}}
                            <script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
                            <script>
                                let myEditor;

                                ClassicEditor
                                    .create(document.querySelector('#editor'), {
                                        ckfinder: {
                                            uploadUrl: "{{ route('promotions.upload') }}?_token={{ csrf_token() }}"
                                        }
                                    })
                                    .then(editor => {
                                        myEditor = editor;
                                    })
                                    .catch(error => {
                                        console.error(error);
                                    });

                                document.getElementById('showHtmlBtn').addEventListener('click', () => {
                                    alert(myEditor.getData()); // oppure apri un modal / textarea
                                });
                            </script>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endsection