create_form

<div class="container">
    @include('shop.modal')
    <div class="card mt-4">
        <div>
            <button class="btn btn-primary" id="addBoxButton">dodaj box</button>
            <button class="btn btn-primary" id="addProductButton">dodaj produkt</button>

{{--            <a class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modal-notification"><span class="bi bi-plus-lg"></span>{% trans %}button.addNewNotification{% endtrans %}</a>--}}
{{--            <button class="btn btn-primary" id="exitBox" style="display: none;">Wyjdz</button>--}}
{{--            <button class="btn btn-primary" id="editBox" style="display: none;">Edytuj box</button>--}}
        </div>
        <div>
{{--            <form action="" method="post" id="form">--}}
{{--                @csrf--}}
                <div>
                    <div class="col-12" id="tableItem">
                        <table id="boxTable" class="table">
                            <thead>
                            <tr>
                                <th>Purchase Date</th>
                                <th>Cost Price</th>
                                <th>Additional Costs</th>
                                <th>Quantity</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                            <table id="productTable" class="table" style="max-width: 200px">
                                <thead>
                                <tr>
                                    <th>name</th>
                                    <th>purchase_date</th>
                                    <th>cost_price_product</th>
                                    <th>additional_costs_product</th>
                                    <th>condition_product</th>
                                    <th>color_product</th>
                                    <th>dictionary_product</th>
                                    <th>new_product</th>
                                    <th>photo</th>
                                    <th>photo_product</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                    </div>
                </div>
{{--                <button type="submit" class="btn btn-primary">Wyślij</button>--}}
{{--            </form>--}}
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        var box = [];
        var boxTables = $('#boxTable').DataTable({
            dom: 'rt',
        });
        var product = [];
        var productTables = $('#productTable').DataTable();
        var photos = [];
        var rowId;

        $("#addBoxButton").click(function () {
            $("#modal-add-box").modal("show");
        });

        $("#add-box").click(function () {

            var newBox = {
                purchase_date_box: $("#purchase_date_box").val(),
                cost_price_box: $("#cost_price_box").val(),
                additional_costs_box: $("#additional_costs_box").val(),
                Quantity_box: $("#Quantity_box").val(),
            };

            box.push(newBox);
            boxTables.row.add([
                newBox.purchase_date_box,
                newBox.cost_price_box,
                newBox.additional_costs_box,
                newBox.Quantity_box,
                '<div style="display: flex;"><button class="btn btn-success editBoxButton">Edytuj</button> <button class="btn btn-danger deleteBoxButton">Usuń</button></div>'
            ]).node().setAttribute('data-id', box.length - 1);
            boxTables.draw();

            $("#modal-add-box").modal("hide");

            $("#purchase_date_box").val("");
            $("#cost_price_box").val("");
            $("#additional_costs_box").val("");
            $("#Quantity_box").val("");

        });

        $('#boxTable').on('click', '.deleteBoxButton', function () {
            rowId = $(this).closest('tr').data('id');
            boxTables.row($(this).closest('tr')).remove().draw(false);
            box.splice(rowId, 1);
            rowId = null;
        });

        $('#boxTable').on('click', '.editBoxButton', function () {
            rowId = $(this).closest('tr').data('id');
            console.log("Przed aktualizacją danych w tabeli:", boxTables.row($(this).closest('tr')).data());
            // Pobierz dane z tablicy 'product' dla wybranego wiersza
            var selectedBox = box[rowId];

            // Wypełnij pola formularza danymi z wybranego wiersza
            $("#purchase_date_box_edit").val(selectedBox.purchase_date_box);
            $("#cost_price_box_edit").val(selectedBox.cost_price_box);
            $("#additional_costs_box_edit").val(selectedBox.additional_costs_box);
            $("#Quantity_box_edit").val(selectedBox.Quantity_box);

            // Otwórz modal edycji
            $("#modal-edit-box").modal("show");
        });

        $("#edit-box").click(function () {
            var $this = $(this);
            var editedBox = {
                purchase_date_box: $("#purchase_date_box_edit").val(),
                cost_price_box: $("#cost_price_box_edit").val(),
                additional_costs_box: $("#additional_costs_box_edit").val(),
                Quantity_box: $("#Quantity_box_edit").val(),
            };

            box[rowId] = editedBox;

            boxTables.row(rowId).data([
                editedBox.purchase_date_box,
                editedBox.cost_price_box,
                editedBox.additional_costs_box,
                editedBox.Quantity_box,
                '<div style="display: flex;"><button class="btn btn-success editBoxButton">Edytuj</button> <button class="btn btn-danger deleteBoxButton">Usuń</button></div>'
            ]).draw();
            console.log("Po aktualizacji danych w tabeli:", boxTables.row($this.closest('tr')).data());

            $("#modal-edit-box").modal("hide");

        });

        $("#addProductButton").click(function () {
            $("#modal-add-product").modal("show");
        });

        $("#add-product").click(function () {

            var newProduct = {
                product_name: $("#name_product").val(),
                product_purchase_date: $("#purchase_date_product").val(),
                product_cost_price: $("#cost_price_product").val(),
                product_additional_costs: $("#additional_costs_product").val(),
                product_condition: $("#condition_product").val(),
                product_color: $("#color_product").val(),
                product_dictionary: $("#dictionary_product").val(),
                product_new: $("#new_product").val(),
                photos: []
            };

            const photoContainer = $('#thumbnail-container .thumbnail img');
            const photos = [];
            photoContainer.each(function () {
                const originalSrc = $(this).data('original-src');
                photos.push(originalSrc);
            });
            newProduct.photos = photos;  // Przypisz tablicę ze zdjęciami do właściwości 'photos'
            const photoStatus = photos.length > 0 ? "dodane " : "nie dodano";

            product.push(newProduct);
            productTables.row.add([
                newProduct.product_name,
                newProduct.product_purchase_date,
                newProduct.product_cost_price,
                newProduct.product_additional_costs,
                newProduct.product_condition,
                newProduct.product_color,
                newProduct.product_dictionary,
                newProduct.product_new,
                newProduct.photos,
                photoStatus,
            '<div style="display: flex;"><button class="btn btn-success editProductButton">Edytuj</button> <button class="btn btn-danger deleteProductButton">Usuń</button></div>'
            ]).node().setAttribute('data-id', product.length - 1);
            productTables.columns([8]).visible(false);

            productTables.draw();

            $("#modal-add-product").modal("hide");

            $("#name_product").val("");
            $("#purchase_date_product").val("");
            $("#cost_price_product").val("");
            $("#additional_costs_product").val("");
            $("#condition_product").val("");
            $("#color_product").val("");
            $("#dictionary_product").val("");
            $("#new_product").val("");
            $('#thumbnail-container .thumbnail').remove();
        });

        $('#productTable').on('click', '.deleteProductButton', function () {
            rowId = $(this).closest('tr').data('id');
            productTables.row($(this).closest('tr')).remove().draw(false);
            product.splice(rowId, 1);
            rowId = null;
        });

        $('#productTable tbody').on('click', '.editProductButton', function (event) {
            event.preventDefault();
            rowId = $(this).closest('tr').data('id');

            var selectedProduct = product[rowId];

            // Wypełnij pola formularza danymi z wybranego wiersza
            $("#name_product_edit").val(selectedProduct.product_name);
            $("#purchase_date_product_edit").val(selectedProduct.product_purchase_date);
            $("#cost_price_product_edit").val(selectedProduct.product_cost_price);
            $("#additional_costs_product_edit").val(selectedProduct.product_additional_costs);
            $("#condition_product_edit").val(selectedProduct.product_condition);
            $("#color_product_edit").val(selectedProduct.product_color);
            $("#dictionary_product_edit").val(selectedProduct.product_dictionary);
            $("#new_product_edit").val(selectedProduct.product_new);
console.log(photos)
            photos = selectedProduct.photos;
            // loadThumbnails(selectedProduct.photos);
            // Otwórz modal edycji
            $("#modal-edit-product").modal("show");
        });

        $("#edit-product").click(function () {
            var $this = $(this);
            var editedProduct = {
                product_name: $("#name_product_edit").val(),
                product_purchase_date: $("#purchase_date_product_edit").val(),
                product_cost_price: $("#cost_price_product_edit").val(),
                product_additional_costs: $("#additional_costs_product_edit").val(),
                product_condition: $("#condition_product_edit").val(),
                product_color: $("#color_product_edit").val(),
                product_dictionary: $("#dictionary_product_edit").val(),
                product_new: $("#new_product_edit").val(),
                photos: []
            };

            const photoContainer = $('#thumbnail-container-edit .thumbnail img');
            // const photos = [];
            photoContainer.each(function () {
                const originalSrc = $(this).data('original-src');
                photos.push(originalSrc);
            });
            editedProduct.photos = photos;  // Przypisz tablicę ze zdjęciami do właściwości 'photos'
            const photoStatus = photos.length > 0 ? "dodane " : "nie dodano";
            product[rowId] = editedProduct;

            productTables.row(rowId).data([
                editedProduct.product_name,
                editedProduct.product_purchase_date,
                editedProduct.product_cost_price,
                editedProduct.product_additional_costs,
                editedProduct.product_condition,
                editedProduct.product_color,
                editedProduct.product_dictionary,
                editedProduct.product_new,
                editedProduct.photos,
                photoStatus,
                '<div style="display: flex;"><button class="btn btn-success editProductButton">Edytuj</button> <button class="btn btn-danger deleteProductButton">Usuń</button></div>'
            ]).node().setAttribute('data-id', product.length - 1);
            productTables.columns([8]).visible(false);
            productTables.draw();
            photos = [];
            $("#modal-edit-product").modal("hide");

        });

        // function loadThumbnails(photos) {
        //     const thumbnailContainer = $('#thumbnail-container-edit');
        //     thumbnailContainer.empty();
        //     console.log(thumbnailContainer)
        //
        //     for (let i = 0; i < photos.length; i++) {
        //         const thumbnail = `
        //     <div class="thumbnail small-thumbnail">
        //         <img src="${photos[i]}" alt="Thumbnail">
        //         <button class="delete-button">X</button>
        //     </div>`;
        //         thumbnailContainer.append(thumbnail);
        //     }
        // }

        $('#thumbnail-container-edit').on('click', '.thumbnail img', function () {
            const originalSrc = $(this).data('original-src');
            displayLargeImage(originalSrc);
        });

        $('#thumbnail-container-edit').on('click', '.delete-button', function () {
            $(this).parent().remove(); // Usunięcie rodzica przycisku (czyli obrazka) z kontenera
        });

// Przypisz zdarzenie dla input #photo_product w kontenerze #modal-edit-product
        $('#photo_product_edit').on('change', function () {
            displayThumbnailsEdit(this);
            // Wyczyść wartość pola wejściowego, aby umożliwić ponowne dodanie tego samego pliku
            $(this).val('');
        });

            $('#photo_product').on('change', function () {
                displayThumbnails(this);
                // Wyczyść wartość pola wejściowego, aby umożliwić ponowne dodanie tego samego pliku
                $(this).val('');
            });

            $('#thumbnail-container').on('click', '.thumbnail img', function () {
                const originalSrc = $(this).data('original-src');
                displayLargeImage(originalSrc);
            });

            $('#thumbnail-container').on('click', '.delete-button', function () {
                $(this).parent().remove(); // Usunięcie rodzica przycisku (czyli obrazka) z kontenera
            });


            $('body').on('click', '#largeImageModal .btn-secondary', function () {
                $('#largeImageModal').modal('hide');
            });

            function displayLargeImage(src) {
                const modalContent = `
        <div class="modal fade" id="largeImageModal" tabindex="-1" role="dialog" aria-labelledby="largeImageModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="${src}" class="img-fluid" alt="Large Image">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Zamknij</button>
                    </div>
                </div>
            </div>
        </div>`;

                // Usuń poprzedni modal, jeśli istnieje
                $('#largeImageModal').remove();

                // Dodaj nowy modal do body
                $('body').append(modalContent);

                // Wywołaj modal
                $('#largeImageModal').modal('show');
            }

            function displayThumbnails(input) {
                if (input.files && input.files.length > 0) {
                    const thumbnailContainer = $('#thumbnail-container');
                    const maxThumbnailSize = 50; // Zmniejszono rozmiar miniaturki

                    // Sprawdź, czy istnieje już blok miniatur, jeśli nie, utwórz go
                    let thumbnailsWrapper = thumbnailContainer.find('.thumbnails-wrapper');
                    if (!thumbnailsWrapper.length) {
                        thumbnailsWrapper = $('<div class="thumbnails-wrapper"></div>');
                    }

                    for (let i = 0; i < input.files.length; i++) {
                        const reader = new FileReader();

                        reader.onload = function (e) {
                            const img = new Image();
                            img.src = e.target.result;

                            img.onload = function () {
                                const canvas = document.createElement('canvas');
                                const ctx = canvas.getContext('2d');

                                let width = img.width;
                                let height = img.height;

                                if (width > height) {
                                    if (width > maxThumbnailSize) {
                                        height *= maxThumbnailSize / width;
                                        width = maxThumbnailSize;
                                    }
                                } else {
                                    if (height > maxThumbnailSize) {
                                        width *= maxThumbnailSize / height;
                                        height = maxThumbnailSize;
                                    }
                                }

                                canvas.width = width;
                                canvas.height = height;
                                ctx.drawImage(img, 0, 0, width, height);

                                // Dodaj pojedynczą miniaturę do bloku
                                const thumbnail = `
                        <div class="thumbnail">
                            <img src="${canvas.toDataURL('image/jpeg')}" data-original-src="${e.target.result}" alt="Thumbnail">
                            <button class="delete-button">X</button>
                        </div>`;

                                thumbnailsWrapper.append(thumbnail);
                            };
                        };

                        reader.readAsDataURL(input.files[i]);
                    }

                    // Dodaj blok z miniaturami do kontenera
                    thumbnailContainer.empty().append(thumbnailsWrapper); // Usuń istniejące miniatury i dodaj nowe
                }
            }

        function displayThumbnailsEdit(input) {
            if (input.files && input.files.length > 0) {
                const thumbnailContainer = $('#thumbnail-container-edit');
                const maxThumbnailSize = 50;

                // Wyczyść kontener z istniejących miniatur
                thumbnailContainer.empty();

                // Utwórz zmienną lokalną dla zdjęć
                // const newPhotos = [];

                // Przetwarzaj istniejące zdjęcia
                for (let i = 0; i < photos.length; i++) {
                    const thumbnail = `
                <div class="thumbnail small-thumbnail">
                    <img src="${photos[i]}" alt="Thumbnail">
                    <button class="delete-button">X</button>
                </div>`;
                    thumbnailContainer.append(thumbnail);

                    // Dodaj istniejące zdjęcia do zmiennej lokalnej
                    // newPhotos.push(photos[i]);
                }

                // Przetwarzaj nowe zdjęcia
                for (let i = 0; i < input.files.length; i++) {
                    const reader = new FileReader();

                    reader.onload = function (e) {
                        const img = new Image();
                        img.src = e.target.result;

                        img.onload = function () {
                            const canvas = document.createElement('canvas');
                            const ctx = canvas.getContext('2d');

                            let width = img.width;
                            let height = img.height;

                            if (width > height) {
                                if (width > maxThumbnailSize) {
                                    height *= maxThumbnailSize / width;
                                    width = maxThumbnailSize;
                                }
                            } else {
                                if (height > maxThumbnailSize) {
                                    width *= maxThumbnailSize / height;
                                    height = maxThumbnailSize;
                                }
                            }

                            canvas.width = width;
                            canvas.height = height;
                            ctx.drawImage(img, 0, 0, width, height);

                            // Dodaj nowe zdjęcia do zmiennej lokalnej
                            photos.push(canvas.toDataURL('image/jpeg'));

                            // Dodaj miniaturę do kontenera
                            const thumbnail = `
                        <div class="thumbnail">
                            <img src="${canvas.toDataURL('image/jpeg')}" data-original-src="${e.target.result}" alt="Thumbnail">
                            <button class="delete-button">X</button>
                        </div>`;
                            thumbnailContainer.append(thumbnail);
                        };
                    };

                    reader.readAsDataURL(input.files[i]);
                }

                // Zaktualizuj globalną tablicę photos za pomocą zmiennej lokalnej
                // photos = newPhotos;
            }
        }

        // Dodaj nasłuchiwanie zdarzeń dla wysyłki formularza
        $('form').submit(function(event) {

            event.preventDefault();

            // Pobierz dane z DataTables
            var boxData = boxTables.rows().data().toArray();
            var productData = productTables.rows().data().toArray();

            // Połącz dane w jeden obiekt
            var formData = {
                boxData: boxData,
                productData: productData
            };

            // Wyślij dane na serwer za pomocą AJAX
            $.ajax({
                url: '/shop',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', formData: formData },
                success: function(response) {
                    console.log('Wysłane')
                    console.log(response.aa);
                },
                error: function(error) {
                    console.log('nie wyslane')
                    // console.error(error);
                }
            });
        });
    });
</script>