@extends('layouts.app', ['title' => 'PRM | Produkte'])
@section('content')
    <!-- modals -->
    {{-- new Item --}}
    <div class="modal fade  modal-dialog-scrollable modal-xl" id="new-item" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('prm.product.store') }}" method="POST" id="frmNewItem" class="needs-validation"
                    novalidate enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">neuer Spielgerät</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body" id="collapseExample">

                        <div class="">





                            <div class="container mt-3">

                                <div class="row">
                                    <div class="col-3">
                                        <h5>Katalog </h5>
                                        <select class="form-select form-select-sm " id="catalog_id" name="catalog_id"
                                            required>
                                            @foreach ($catalogs as $catalog)
                                                <option value="{{ $catalog->id }}">
                                                    {{ $catalog->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col">
                                        <h5 class="text-start">Name </h5>
                                        <input type="text" name="name" class="form-control form-control-sm"
                                            id="name" value="" required />
                                    </div>
                                    <div class="col-3">
                                        <h5 class="text-start">Preis-Netto </h5>
                                        <input type="number" name="net_price" class="form-control form-control-sm"
                                            id="net_price" value="" step="0.01" />
                                    </div>



                                </div>
                                <br>


                                <div class="row">
                                    <div class="col">
                                        <h5>Kurze Beschreibung </h5>
                                        <textarea class="form-control" id="description_small" name="description_small" rows="2" required></textarea>
                                    </div>
                                </div>
                                <br>

                                <div class="row">
                                    <div class="col">
                                        <h5>Ausstattung </h5>
                                        <textarea class="form-control ckeditor" id="equipment" name="equipment" rows="3" required></textarea>
                                    </div>
                                </div>
                                <br>

                                <div class="row">
                                    <div class="col">
                                        <h5>Technische Daten </h5>
                                        <textarea class="form-control ckeditor" id="technical_specifications" name="technical_specifications" rows="3"
                                            required></textarea>
                                    </div>
                                </div>
                                <br>

                                <div class="row">
                                    <div class="col">
                                        <h5>Beschreibung </h5>
                                        <textarea class="form-control ckeditor" id="description_long" name="description_long" rows="3" required></textarea>
                                    </div>
                                </div>
                                <br>
                                <div class="row">
                                    <div class="col">
                                        <h5>LV-Text </h5>
                                        <textarea class="form-control ckeditor" id="lv_text" name="lv_text" rows="6" required></textarea>
                                    </div>
                                </div>
                                <br>
                                <div class="row">
                                    <div class="col-4">

                                        <div class="col">
                                            <h5 class="text-start">Draufsicht - Maßstab </h5>
                                            <input type="text" name="scale" class="form-control form-control-sm"
                                                id="scale" value="" />
                                        </div>
                                    </div>
                                </div>
                                <br>



                            </div>


                            <div class="container mt-3">
                                <div class="col-md-12  form-group ">
                                    <h5>
                                        Foto - Entwuerf (.jpg / 700x600 Pixel) </h5>
                                    <input class="form-control file mb-3" type="file" id="img_full" name="img_full"
                                        data-show-upload="true" data-show-caption="true" accept=".jpg" required />
                                </div>

                            </div>
                            <div class="container mt-3">
                                <div class="col-md-12  form-group ">
                                    <h5>
                                        Foto - Plan (.jpg / Ca. 750x465 Pixel) </h5>
                                    <input class="form-control file mb-3" type="file" id="img_up" name="img_up"
                                        data-show-upload="true" data-show-caption="true" accept=".jpg" required />
                                </div>

                            </div>

                            <div class="col-12 mb-4  ">
                                <small style="color:gray"> Mit Stern ( * ) markierte Felder sind Pflichtfelder.
                                </small>
                            </div>
                            {{-- <div class="container text-end">
                                <button type="submit" class="btn btn-success">
                                    <i class="fa-solid fa-upload"></i> Hochladen
                                </button>


                            </div> --}}
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                        <button type="submit" class="btn btn-success">Speichern</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- edit Item --}}
    <div class="modal fade modal-dialog-scrollable modal-xl" id="edit-item" data-bs-backdrop="static"
        data-bs-keyboard="false" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('prm.product.update', ['id' => $product->id ?? '']) }}" method="POST"
                    class="needs-validation" novalidate enctype="multipart/form-data">
                    @csrf
                    <input id="id-edit" name="id-edit" value="" hidden>
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="editModalLabel">Spielgerät bearbeiten</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">

                        <div class="container mt-3">
                            <div class="row">
                                <div class="col-3">
                                    <h5>Katalog</h5>
                                    <select class="form-select form-select-sm" id="catalog_id-edit" name="catalog_id"
                                        required>
                                        @foreach ($catalogs as $catalog)
                                            <option value="{{ $catalog->id }}"
                                                {{ isset($product) && $product->catalog_id == $catalog->id ? 'selected' : '' }}>
                                                {{ $catalog->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col">
                                    <h5>Name</h5>
                                    <input type="text" name="name" class="form-control form-control-sm"
                                        id="name-edit" value="{{ old('name', $product->name ?? '') }}" required />
                                </div>
                                <div class="col-3">
                                    <h5 class="text-start">Preis-Netto </h5>
                                    <input type="number" name="net_price" class="form-control form-control-sm"
                                        id="net_price-edit" value="" step="0.01" />
                                </div>
                            </div>

                            <br>

                            <div class="row">
                                <div class="col">
                                    <h5>Kurze Beschreibung</h5>
                                    <textarea class="form-control" id="description_small-edit" name="description_small" rows="2" required></textarea>
                                </div>
                            </div>

                            <br>

                            <div class="row">
                                <div class="col">
                                    <h5>Ausstattung</h5>
                                    <textarea class="form-control " id="equipment-edit" name="equipment" rows="3" required></textarea>
                                </div>
                            </div>

                            <br>

                            <div class="row">
                                <div class="col">
                                    <h5>Technische Daten</h5>
                                    <textarea class="form-control" id="technical_specifications-edit" name="technical_specifications" rows="3"
                                        required></textarea>
                                </div>
                            </div>

                            <br>

                            <div class="row">
                                <div class="col">
                                    <h5>Beschreibung</h5>
                                    <textarea class="form-control" id="description_long-edit" name="description_long" rows="3" required></textarea>
                                </div>
                            </div>

                            <br>

                            <div class="row">
                                <div class="col">
                                    <h5>LV-Text</h5>
                                    <textarea class="form-control" id="lv_text-edit" name="lv_text" rows="6" required></textarea>
                                </div>
                            </div>

                            <br>

                            <div class="row">
                                <div class="col-4">
                                    <h5>Draufsicht - Maßstab</h5>
                                    <input type="text" name="scale" class="form-control form-control-sm"
                                        id="scale-edit" value="" />
                                </div>
                            </div>

                            <br>

                            <div class="col-md-12 form-group mt-3">
                                <h5>Foto - Entwurf (.jpg)</h5>
                                <input class="form-control file mb-3" type="file" id="img_full-edit" name="img_full"
                                    accept=".jpg" />
                            </div>

                            <div class="col-md-12 form-group mt-3">
                                <h5>Foto - Plan (.jpg)</h5>
                                <input class="form-control file mb-3" type="file" id="img_up-edit" name="img_up"
                                    accept=".jpg" />
                            </div>

                            <div class="col-12 mb-4">
                                <small style="color:gray">Mit Stern ( * ) markierte Felder sind Pflichtfelder.</small>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                        <button type="submit" class="btn btn-primary">Änderungen speichern</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade modal-dialog-scrollable modal-lg" id="edit-moda2l" data-bs-backdrop="static"
        data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('prm.product.update') }}" method="POST" class="needs-validation" novalidate>
                    @csrf
                    <input id="id-edit" name="id-edit" value="" hidden>
                    <div class="modal-header">
                        <h5 class="modal-title " id="staticBackdropLabel">Katalog</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">

                        <div class="row mt-2">

                            <div class="col">
                                <label class="form-label">Name </label>
                                <input type="text" class="form-control p" id="name-edit" name="name-edit"
                                    list="lieferant" required>


                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col">
                                <label for="" class="form-label">Beschreibung</label>
                                <textarea class="form-control" name="description-edit" id="description-edit" rows="3"></textarea>

                            </div>
                        </div>


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                        <button type="submit" class="btn btn-success">Aktualisieren</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- delete Item --}}
    <div class="modal fade modal-dialog-scrollable modal-lg" id="delete-item" data-bs-backdrop="static"
        data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('prm.product.delete') }}" method="POST" class="needs-validation" novalidate>
                    @csrf

                    <input id="id" name="id" value="" hidden>
                    <div class="modal-header">
                        <h5 class="modal-title " id="staticBackdropLabel"> Produkt löschen </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">

                        <div class="row mt-2">
                            <div class="col">
                                <h4 class="text-center">Möchten Sie diesen Produkt wirklich
                                    löschen ? </h4>
                                <p class="text-muted small text-center">Diese Aktion kann nicht rückgängig gemacht werden.
                                </p>
                            </div>

                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                        <button type="submit" class="btn btn-danger">Löschen</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="">
        <div class="row">
            <div class="col">
                <label class="bg-white border px-2 p-1 w-100 fs-4 rounded shadow-sm">PRM | Produkte</label>

            </div>
            {{-- <div class="col">
            @include('layouts.breadcrumb', ['crumbs' => [ucfirst(Request::segment(1)), ucfirst(Request::segment(2))]])
        </div> --}}
            {{-- @if (Auth::user()->get_employee->is_mgt and Auth::user()->get_employee->is_srm) --}}


            @if (Auth::user()->get_employee->is_mgt or Auth::user()->get_employee->is_prm)
                <div class="col-1 float-end text-end">

                    <button type="button" class="p-2 btn btn-success shadow-sm w-100" data-bs-toggle="modal"
                        data-bs-target="#new-item">
                        <i class="bi bi-plus-square"></i> Neu
                    </button>



                </div>
            @endif
        </div>
        <br>
        <div class="bg-white mb-5">
            @if (session('error'))
                <div class="alert alert-danger alert-dismissible" id="danger-alert">
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>

                    <p class="text-center"> {{ session('error') }} </p>
                    <p class="text-center"> {{ session('error1') }} </p>
                    <p class="text-center"> {{ session('error2') }} </p>

                </div>
                <script>
                    $("#danger-alert").fadeTo(10000, 500).slideUp(500, function() {
                        $("#danger-alert").slideUp(2000);
                    });
                </script>
            @endif
            @if (session('msg'))
                <div class="alert alert-success alert-dismissible" id="success-alert">
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>

                    <p class="text-center"> {{ session('msg') }}</p>

                </div>
                <script>
                    $("#success-alert").fadeTo(2000, 500).slideUp(500, function() {
                        $("#success-alert").slideUp(1000);
                    });
                </script>
            @endif

            <div class="container-fluid bg-white mb-5 rounded border pt-2">
                <form action="{{ route('prm.product.index') }}" method="get">

                    <div class="row mt-1 mb-2">

                        <div class="col-3 text-center">
                        </div>
                        <div class="col-6 text-center">
                            <div class="input-group   ">
                                <input type="text" class="form-control  rounded-0" placeholder="Suche nach Namen"
                                    id="name" name="name" value="{{ request('name') }}">
                                <div class="input-group-append   ">
                                    <button class="btn  text-white bg-primary rounded-0 " type="submit"> <i
                                            class="bi bi-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>


                    </div>
                </form>
                <hr>

                <div class=" ">
                    <small>*Alle Produkte zzgl. MwSt. & Lieferung</small>
                    <table class="table table-responsive table-hover contact-list table-striped" data-page-size="5">
                        <thead>
                            <tr>
                                <th class="col-1">
                                    <form action="{{ route('prm.product.sort') }}" method="post">
                                        @csrf
                                        <input type="hidden" name="sort" value="id">
                                        <button type="submit" class="btn btn-outline-info btn-sm"><small>Neusete</small>
                                            @if (Session::get('product_sort') == 'id')
                                                <span class="sorting-icons"> <i
                                                        class="bi bi-sort-numeric-{{ Session::get('product_sort_range') == 'asc' ? 'down' : 'up' }}"></i></span>
                                            @else
                                                <i class="bi bi-filter-left"></i>
                                            @endif
                                        </button>
                                    </form>
                                    <a class="text-decoration-none text-info"></a>
                                </th>
                                {{-- <th class="col-1 "></th> --}}
                                <th class="col-3    ">
                                    <div class="row ">
                                        <div class="col">
                                            <form action="{{ route('prm.product.sort') }}" method="post">
                                                @csrf
                                                <input type="hidden" name="sort" value="name">


                                                <button type="submit"
                                                    class="btn  btn-outline-info btn-sm"><small>Produkt</small>
                                                    @if (Session::get('catalog_sort') == 'name')
                                                        <span class="sorting-icons"> <i
                                                                class="bi bi-sort-alpha-{{ Session::get('catalog_sort_range') == 'asc' ? 'down' : 'up' }}"></i></span>
                                                    @else
                                                        <i class="bi bi-filter-left"></i>
                                                    @endif
                                                </button>
                                            </form>
                                        </div>
                                        <div class="col text-end">
                                            <form action="{{ route('prm.product.sort') }}" method="post">
                                                @csrf
                                                <input type="hidden" name="sort" value="net_price">


                                                <button type="submit"
                                                    class="btn  btn-outline-info btn-sm"><small>Preis</small>
                                                    @if (Session::get('catalog_sort') == 'net_price')
                                                        <span class="sorting-icons"> <i
                                                                class="bi bi-sort-alpha-{{ Session::get('catalog_sort_range') == 'asc' ? 'down' : 'up' }}"></i></span>
                                                    @else
                                                        <i class="bi bi-filter-left"></i>
                                                    @endif
                                                </button>
                                            </form>
                                        </div>
                                    </div>

                </div>

                </th>
                <th class="col-2 small text-info text-small">Ausstattung</th>
                <th class="col-2 small text-info text-small">Technische Daten</th>
                <th class="col-3 small text-info text-small">LV-Texte</th>


                @if (Auth::user()->get_employee->is_mgt or Auth::user()->get_employee->is_prm)
                    <th class="col-1"><small class=" text-info">Aktion</small></th>
                @endif
                </tr>
                </thead>
                <tbody id="clients-td-container" class="">
                    <!--ajax content here-->
                    <!--each row-->
                    @if ($items->count() > 0)
                        @foreach ($items as $item)
                            <tr id="" class="border border-2 p-1 m-1">

                                <td class="">


                                    <div class="row ">
                                        <div class="col"> <img src="{{ asset($item->img_full) }}"
                                                class="img-fluid rounded-top" alt="img.{{ $item->name }}" />
                                        </div>

                                    </div>



                                </td>
                                <td>
                                    <div class="row border rounded mx-1 ">
                                        <div class="col">
                                            <h5>{{ $item->name }}</h5>
                                        </div>
                                        <div class="col text-end">
                                            <h5> {{ number_format($item->net_price, 2, ',', '.') }}
                                                €</h5>
                                        </div>


                                    </div>
                                    <div class="row mx-1">

                                        <div class="col  ">
                                            <small style="white-space: pre-line">{!! $item->short_description !!}</small>
                                        </div>
                                    </div>
                                    <div class="row  mx-1 mt-1">
                                        <small style="white-space: pre-line">{!! Str::limit(ltrim(strip_tags($item->long_description)), 200) !!}</small>
                                    </div>

                                </td>
                                <td>
                                    <div class="row  ">

                                        <div class="col  ">
                                            <p style="white-space: pre-line">{!! $item->equipment !!}</p>

                                        </div>


                                    </div>
                                </td>

                                <td>
                                    <div class="row  ">

                                        <div class="col  ">
                                            <p style="white-space: pre-line">{!! $item->technical_specifications !!}</p>

                                        </div>


                                    </div>
                                </td>
                                <td>
                                    <div class="row  ">

                                        <div class="col  ">
                                            <small style="">
                                                {!! Str::limit(strip_tags($item->lv_text), 200) !!}
                                                {{-- {!! Str::limit(ltrim(strip_tags($item->lv_text)), 200) !!} --}}

                                            </small>


                                        </div>


                                    </div>
                                </td>

                                @if (Auth::user()->get_employee->is_mgt or Auth::user()->get_employee->is_prm)
                                    <td class="clients_col_action actions_column w-25" id="clients_col_action_20">
                                        <!--action button-->
                                        <span class="list-table-action dropdown font-size-inherit">
                                            <!--delete-->
                                            <button type="button" title="Löschen"
                                                class="btn btn-sm btn-outline-danger delete_btn" data-bs-toggle="modal"
                                                data-bs-target="#delete-item" data-id="{{ $item->id }}">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                            <!--edit-->
                                            <button type="button" title="Bearbeiten"
                                                class="btn btn-sm btn-outline-success"
                                                onclick="editItem({{ $item->id }})">
                                                <i class="bi bi-pencil-square"></i>
                                            </button>

                                            {{-- <button type="button" title="Anzeigen"
                                                    class="btn btn-sm btn-outline-primary">
                                                    <i class="bi bi-box-arrow-up-right"></i>
                                                </button> --}}


                                        </span>
                                        <!--action button-->

                                    </td>
                                @endif

                            </tr>
                            <!--each row-->
                        @endforeach
                    @else
                        <tr>
                            <td class=" text-center" colspan="100%">
                                <h6 class=" text-center">Keine Daten</h6>
                            </td>
                        </tr>
                    @endif
                </tbody>
                <tfoot>
                    <tr>

                    </tr>
                </tfoot>
                </table>
                <br>
                <div class="d-flex justify-content-center pagination pagination-lg text-dark">

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


    </div>
    </div>
    <script>
        $(document).on('click', '.delete_btn', function() {
                let id = $(this).attr('data-id');
                $('#id').val(id);
                // document.getElementById('ptitle').innerHTML = "You pressed ";
            }

        );

        // function editItem(id) {
        //     var url = "{{ route('prm.product.get', ':id') }}";
        //     url = url.replace(':id', id);

        //     $.get(url, function(item) {
        //         $("#id-edit").val(item.id); // Falls du ein hidden input für ID hast
        //         $("#name-edit").val(item.name);
        //         $("#catalog_id-edit").val(item.catalog_id);


        //         $("#scale-edit").val(item.scale);

        //         // Optional: Wenn du Dateifelder vorher anzeigen oder zurücksetzen willst
        //         $("#img_full-edit").val('');
        //         $("#img_up-edit").val('');
        //         $("#equipment-edit").val(item.equipment);

        //         $("#technical_specifications-edit").val(item.technical_specifications);
        //         $("#description_long-edit").val(item.long_description);
        //         $("#description_small-edit").val(item.short_description);
        //         $("#lv_text-edit").val(item.lv_text);

        //         $("#edit-item").modal('toggle'); // Modal-ID: edit-item
        //     });
        // }
    </script>
    <script>
        // ClassicEditor
        //     .create(document.querySelector('#equipment'))
        //     .catch(error => {
        //         console.error(error);
        //     });
    </script>
    {{-- <script src="{{ mix('js/ckeditor.js') }}"></script> --}}
    {{-- <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Initialize CKEditor on specific textareas where needed
            ClassicEditor
                .create(document.querySelector('#equipment'))
                .catch(error => console.error(error));

            ClassicEditor
                .create(document.querySelector('#technical_specifications'))
                .catch(error => console.error(error));

            ClassicEditor
                .create(document.querySelector('#description_long'))
                .catch(error => console.error(error));
        });
    </script> --}}

    {{-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> --}}
    <script src="{{ asset('assets/vendor/ckeditor5/ckeditor.js') }}"></script>
    {{-- <script src="{{ asset('assets/vendor/ckeditor/adapters/jquery.js') }}"></script> --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Direkt initialisieren, falls außerhalb Modal

            ClassicEditor
                .create(document.querySelector('#equipment'), {
                    toolbar: ['bold', 'italic', 'link', 'undo', 'redo', 'bulletedList', 'numberedList']
                });
            ClassicEditor
                .create(document.querySelector('#technical_specifications'), {
                    toolbar: ['bold', 'italic', 'link', 'undo', 'redo', 'bulletedList', 'numberedList']
                });
            ClassicEditor
                .create(document.querySelector('#description_long'), {
                    toolbar: ['bold', 'italic', 'link', 'undo', 'redo', 'bulletedList', 'numberedList']
                });
            ClassicEditor
                .create(document.querySelector('#lv_text'), {
                    toolbar: ['bold', 'italic', 'link', 'undo', 'redo', 'bulletedList', 'numberedList']
                });
        });
    </script>
    {{-- <script>
        document.addEventListener('DOMContentLoaded', function() {
            const editorFields = [
                'equipment',
                'technical_specifications',
                'description_long',
                'lv_text',
                'equipment-edit',
                'technical_specifications-edit',
                'description_long-edit',
                'description_small-edit',
                'lv_text-edit'
            ];

            editorFields.forEach(id => {
                const el = document.querySelector(`#${id}`);
                if (el) {
                    ClassicEditor
                        .create(el, {
                            toolbar: ['bold', 'italic', 'link', 'undo', 'redo', 'bulletedList',
                                'numberedList'
                            ]
                        })
                        .catch(error => {
                            console.error(`Editor init failed for #${id}:`, error);
                        });
                }
            });
        });

        
    </script> --}}

    <script>
        const editors = {};
        let editorTextareas = [];
        document.addEventListener('DOMContentLoaded', function() {


            const editorFields = [
                // 'equipment',
                // 'technical_specifications',
                // 'description_long',
                // 'lv_text',
                'equipment-edit',
                'technical_specifications-edit',
                'description_long-edit',
                'description_small-edit',
                'lv_text-edit'
            ];

            editorFields.forEach(id => {
                const el = document.querySelector(`#${id}`);
                if (el) {
                    ClassicEditor
                        .create(el, {
                            toolbar: ['bold', 'italic', 'link', 'undo', 'redo', 'bulletedList',
                                'numberedList'
                            ]
                        })
                        .then(editor => {
                            editors[id] = editor;
                        })
                        .catch(error => {
                            console.error(`Editor init failed for #${id}:`, error);
                        });


                }
            });
        });

        function editItem(id) {
            var url = "{{ route('prm.product.get', ':id') }}".replace(':id', id);

            $.get(url, function(item) {
                $("#id-edit").val(item.id);
                $("#name-edit").val(item.name);
                $("#catalog_id-edit").val(item.catalog_id);
                $("#scale-edit").val(item.scale);
                $("#net_price-edit").val(item.net_price);
                $("#img_full-edit").val('');
                $("#img_up-edit").val('');

                if (editors['equipment-edit']) editors['equipment-edit'].setData(item
                    .equipment);
                if (editors['technical_specifications-edit']) editors[
                        'technical_specifications-edit']
                    .setData(item
                        .technical_specifications);
                if (editors['description_long-edit']) editors['description_long-edit'].setData(
                    item
                    .long_description);
                if (editors['description_small-edit']) editors['description_small-edit']
                    .setData(item
                        .short_description);
                if (editors['lv_text-edit']) editors['lv_text-edit'].setData(item.lv_text);

                $("#edit-item").modal('show');
            });
        };
    </script>
    {{-- <script src="{{ asset('assets/vendor/ckeditor/ckeditor.js') }}"></script> --}}
    {{-- <script src="{{ asset('assets/vendor/ckeditor/adapters/jquery.js') }}"></script> --}}
    {{-- <script>
        var editorInstance;

        $('#new-item').on('shown.bs.modal', function() {
            // CKEditor nur initialisieren, wenn noch nicht vorhanden
            if (!editorInstance) {
                editorInstance = CKEDITOR.replace('description_small');
            }
        });

        $('#new-item').on('hidden.bs.modal', function() {
            // CKEditor Instanz zerstören, wenn Modal geschlossen wird
            if (editorInstance) {
                editorInstance.destroy();
                editorInstance = null;
            }
        });
    </script> --}}


@endsection