@once
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
@endonce

<!--begin::Modal - Edit Product-->
<div class="modal fade" id="kt_modal_edit_product" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <form class="form" action="#" id="kt_modal_edit_product_form" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <!--begin::Modal header-->
                <div class="modal-header">
                    <h2 class="fw-bold">
                        <i class="ki-duotone ki-pencil fs-2 me-2">
                            <span class="path1"></span>
                            <span class="path2"></span>
                        </i>
                        Editar Producto
                    </h2>
                    <div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
                        <i class="ki-duotone ki-cross fs-1">
                            <span class="path1"></span>
                            <span class="path2"></span>
                        </i>
                    </div>
                </div>
                <!--end::Modal header-->

                <!--begin::Modal body-->
                <div class="modal-body scroll-y px-lg-10 py-lg-10">
                    <input type="hidden" id="edit_product_id" name="product_id" />

                    <!--begin::Basic Information Section-->
                    <div class="mb-10">
                        <h3 class="fw-bold mb-5">
                            <i class="ki-duotone ki-information-5 fs-2 me-2 text-primary">
                                <span class="path1"></span>
                                <span class="path2"></span>
                                <span class="path3"></span>
                            </i>
                            Información Básica
                        </h3>

                        <div class="row g-5">
                            <!--begin::Product Name-->
                            <div class="col-md-8">
                                <label class="required fw-semibold fs-6 mb-2">
                                    <i class="ki-duotone ki-tag fs-7 me-1 text-muted">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>
                                    Nombre del Producto
                                </label>
                                <input type="text" name="name" id="edit_product_name" class="form-control form-control-solid" placeholder="Ingresa el nombre del producto" />
                                <div class="form-text">El nombre del producto será visible para los clientes</div>
                            </div>
                            <!--end::Product Name-->

                            <!--begin::Price-->
                            <div class="col-md-4">
                                <label class="required fw-semibold fs-6 mb-2">
                                    <i class="ki-duotone ki-dollar fs-7 me-1 text-muted">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>
                                    Precio
                                </label>
                                <div class="input-group input-group-solid">
                                    <span class="input-group-text">$</span>
                                    <input type="number" step="0.01" name="price" id="edit_product_price" class="form-control" placeholder="0.00" />
                                </div>
                                <div class="form-text">Precio en pesos argentinos</div>
                            </div>
                            <!--end::Price-->

                            <!--begin::Quantity Label-->
                            <div class="col-md-4">
                                <label class="fw-semibold fs-6 mb-2">Cantidad / Unidad</label>
                                <input type="text" name="quantity_label" id="edit_product_quantity_label" class="form-control form-control-solid" placeholder="Ej: 25 unidades, 3 LTS." />
                                <div class="form-text">Tamaño del pack o unidad mínima (opcional)</div>
                            </div>
                            <!--end::Quantity Label-->

                            <!--begin::Stripe Price ID-->
                            <div class="col-md-8">
                                <label class="fw-semibold fs-6 mb-2">
                                    <i class="ki-duotone ki-stripe fs-7 me-1 text-muted">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>
                                    Stripe Price ID
                                    <span class="badge badge-light-success ms-2 fs-8">Suscripción</span>
                                </label>
                                <input type="text" name="stripe_price_id" id="edit_product_stripe_price_id" class="form-control form-control-solid" placeholder="price_xxxxxxxxxxxxxxxxxxxxxxxx" />
                                <div class="form-text">
                                    ID del precio recurrente en Stripe. Obtenelo desde
                                    <a href="https://dashboard.stripe.com/products" target="_blank" class="text-primary">dashboard.stripe.com/products</a>
                                </div>
                            </div>
                            <!--end::Stripe Price ID-->
                        </div>
                    </div>
                    <!--end::Basic Information Section-->

                    <!--begin::Description Section-->
                    <div class="mb-10">
                        <label class="required fw-semibold fs-6 mb-2">
                            <i class="ki-duotone ki-notepad fs-7 me-1 text-muted">
                                <span class="path1"></span>
                                <span class="path2"></span>
                            </i>
                            Descripción
                        </label>
                        <textarea name="description" id="edit_product_description" class="form-control form-control-solid" rows="5" placeholder="Describe las características y beneficios del producto..."></textarea>
                        <div class="form-text">Proporciona una descripción detallada del producto para ayudar a los clientes a tomar decisiones informadas</div>
                    </div>
                    <!--end::Description Section-->

                    <!--begin::Categorization Section-->
                    <div class="mb-10">
                        <h3 class="fw-bold mb-5">
                            <i class="ki-duotone ki-category fs-2 me-2 text-primary">
                                <span class="path1"></span>
                                <span class="path2"></span>
                                <span class="path3"></span>
                                <span class="path4"></span>
                            </i>
                            Categorización
                        </h3>

                        <div class="row g-5">
                            <!--begin::Category-->
                            <div class="col-md-6">
                                <label class="fw-semibold fs-6 mb-2">
                                    <i class="ki-duotone ki-folder fs-7 me-1 text-muted">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>
                                    Categoría
                                </label>
                                <div class="d-flex align-items-center gap-2">
                                    <select name="category_id" id="edit_product_category" class="form-select form-select-solid flex-grow-1">
                                        <option value="">{{ __('Select a Category') }}</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                    <!-- Add New Category Button -->
                                    <button type="button" class="btn btn-light-warning btn-sm" id="edit_add_new_category_btn" title="Agregar nueva categoría">
                                        <i class="ki-duotone ki-plus fs-5">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </button>
                                    <!-- Cancel New Category Button -->
                                    <button type="button" class="btn btn-light-danger btn-sm d-none" id="edit_cancel_new_category_btn" title="Cancelar nueva categoría">
                                        <i class="ki-duotone ki-cross fs-5">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </button>
                                </div>
                                <!-- New Category Input (hidden by default) -->
                                <div class="mt-3 d-none" id="edit_new_category_input">
                                    <input type="text" name="new_category" id="edit_new_category_name" class="form-control form-control-solid" placeholder="Nombre de la nueva categoría" />
                                </div>
                            </div>
                            <!--end::Category-->

                            <!--begin::Tags-->
                            <div class="col-md-6">
                                <label class="fw-semibold fs-6 mb-2">
                                    <i class="ki-duotone ki-price-tag fs-7 me-1 text-muted">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>
                                    Tags
                                </label>
                                <select name="tags[]" id="edit_product_tags" class="form-control form-control-solid product-tags-edit" multiple>
                                    @foreach ($tags as $tag)
                                        <option value="{{ $tag->id }}">{{ $tag->name }}</option>
                                    @endforeach
                                </select>
                                <div class="form-text">
                                    <i class="ki-duotone ki-information-5 fs-7 me-1">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                        <span class="path3"></span>
                                    </i>
                                    Puedes crear nuevos tags escribiendo y presionando Enter
                                </div>
                            </div>
                            <!--end::Tags-->
                        </div>
                    </div>
                    <!--end::Categorization Section-->

                    <!--begin::Images Section-->
                    <div class="mb-10">
                        <h3 class="fw-bold mb-5">
                            <i class="ki-duotone ki-picture fs-2 me-2 text-primary">
                                <span class="path1"></span>
                                <span class="path2"></span>
                            </i>
                            Imágenes del Producto
                        </h3>

                        <!--begin::Existing Images-->
                        <div class="mb-7">
                            <label class="fw-semibold fs-6 mb-3 d-flex align-items-center">
                                <i class="ki-duotone ki-image fs-7 me-2 text-muted">
                                    <span class="path1"></span>
                                    <span class="path2"></span>
                                </i>
                                Imágenes Actuales
                            </label>
                            <div id="edit_existing_images_container" class="d-flex flex-wrap gap-3">
                                <!-- Existing images will be loaded here via JavaScript -->
                            </div>
                            <div class="form-text mt-2">Haz clic en el botón de eliminar (×) para marcar imágenes para eliminación</div>
                        </div>
                        <!--end::Existing Images-->

                        <!--begin::New Images-->
                        <div>
                            <label class="fw-semibold fs-6 mb-3 d-flex align-items-center">
                                <i class="ki-duotone ki-file-up fs-7 me-2 text-muted">
                                    <span class="path1"></span>
                                    <span class="path2"></span>
                                </i>
                                Agregar Nuevas Imágenes
                            </label>
                            <div id="kt_products_edit_dropzone" class="dropzone">
                                <div class="dz-message">
                                    <div class="dz-message-icon">
                                        <i class="ki-duotone ki-cloud-upload fs-3x text-primary">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                        </i>
                                    </div>
                                    <div class="dz-message-text">
                                        <span class="fs-6 fw-semibold text-gray-700">Arrastra y suelta las imágenes aquí</span>
                                        <span class="fs-7 text-gray-500 d-block mt-2">o haz clic para seleccionar archivos</span>
                                    </div>
                                    <div class="dz-message-info mt-3">
                                        <span class="badge badge-light-info fs-7">
                                            <i class="ki-duotone ki-information-5 fs-7 me-1">
                                                <span class="path1"></span>
                                                <span class="path2"></span>
                                                <span class="path3"></span>
                                            </i>
                                            Formatos: JPEG, JPG, PNG, GIF, SVG | Máximo 2MB c/u | Hasta 5 imágenes
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--end::New Images-->
                    </div>
                    <!--end::Images Section-->

                </div>
                <!--end::Modal body-->

                <!--begin::Modal footer-->
                <div class="modal-footer flex-center border-top pt-5">
                    <button type="button" class="btn btn-light me-3" data-action="cancel">
                        <i class="ki-duotone ki-cross fs-2 me-2">
                            <span class="path1"></span>
                            <span class="path2"></span>
                        </i>
                        Cancelar
                    </button>
                    <button type="button" class="btn btn-primary" data-action="submit">
                        <span class="indicator-label">
                            <i class="ki-duotone ki-check fs-2 me-2">
                                <span class="path1"></span>
                                <span class="path2"></span>
                            </i>
                            Actualizar Producto
                        </span>
                        <span class="indicator-progress">
                            Actualizando...
                            <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                        </span>
                    </button>
                </div>
                <!--end::Modal footer-->
            </form>
        </div>
    </div>
</div>
<!--end::Modal - Edit Product-->

@once
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
@endonce

<style>
/* Dropzone Styles */
.dropzone {
    border: 2px dashed #e1e3ea;
    border-radius: 0.75rem;
    background: #f8f9fa;
    transition: all 0.3s ease;
    min-height: 200px;
    padding: 2rem;
}

.dropzone:hover {
    border-color: #009ef7;
    background: #f1f8ff;
}

.dropzone.dz-drag-hover {
    border-color: #009ef7;
    background: #e7f5ff;
}

.dropzone .dz-message {
    text-align: center;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
}

.dropzone .dz-message-icon {
    margin-bottom: 1rem;
    color: #7e8299;
}

.dropzone .dz-message-text {
    margin-bottom: 0.5rem;
}

.dropzone .dz-message-info {
    margin-top: 1rem;
}

.dropzone .dz-preview {
    margin: 12px;
    min-height: 120px;
    position: relative;
    display: inline-block;
}

.dropzone .dz-preview .dz-image {
    width: 120px;
    height: 120px;
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
    border: 2px solid #e1e3ea;
    transition: all 0.3s ease;
}

.dropzone .dz-preview:hover .dz-image {
    border-color: #009ef7;
    box-shadow: 0 0 0 4px rgba(0, 158, 247, 0.1);
}

.dropzone .dz-preview .dz-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dropzone .dz-preview .dz-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    background: #dc3545;
    border: 2px solid white;
    border-radius: 50%;
    color: white;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.dropzone .dz-preview .dz-remove:hover {
    background: #c82333;
    transform: scale(1.1);
}

/* Existing Images Container */
#edit_existing_images_container {
    min-height: 60px;
}

.existing-image-item {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px solid #e1e3ea;
    transition: all 0.3s ease;
}

.existing-image-item:hover {
    border-color: #009ef7;
    box-shadow: 0 0 0 4px rgba(0, 158, 247, 0.1);
}

.existing-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.existing-image-item .remove-existing-image {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    background: #dc3545;
    border: 2px solid white;
    border-radius: 50%;
    color: white;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.existing-image-item .remove-existing-image:hover {
    background: #c82333;
    transform: scale(1.1);
}

.existing-image-item.marked-for-deletion {
    opacity: 0.5;
    border-color: #dc3545;
}

.existing-image-item.marked-for-deletion::after {
    content: 'Eliminando';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(220, 53, 69, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

/* Modal Scroll */
.modal-body.scroll-y {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* Section Headers */
#kt_modal_edit_product_form h3.fw-bold {
    border-bottom: 2px solid #e1e3ea;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Form Text Improvements */
.form-text {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}
</style>

<script>
// Initialize Dropzone for edit modal
document.addEventListener('DOMContentLoaded', function() {
    // Initialize edit dropzone
    if (document.getElementById('kt_products_edit_dropzone')) {
        window.productsEditDropzone = new Dropzone("#kt_products_edit_dropzone", {
            url: '#',
            paramName: 'images',
            maxFiles: 5,
            maxFilesize: 2, // 2MB
            acceptedFiles: 'image/jpeg,image/jpg,image/png,image/gif,image/svg+xml',
            addRemoveLinks: true,
            autoProcessQueue: false, // IMPORTANT: Don't auto-upload
            dictDefaultMessage: "",
            dictRemoveFile: "Eliminar",
            dictCancelUpload: "Cancelar",
            dictUploadCanceled: "Carga cancelada",
            dictInvalidFileType: "No puedes subir archivos de este tipo. Solo se permiten imágenes JPEG, JPG, PNG, GIF y SVG.",
            dictFileTooBig: "El archivo es demasiado grande. Tamaño máximo: 2MB.",
            dictMaxFilesExceeded: "No puedes subir más de 5 archivos.",
            dictResponseError: "El servidor respondió con un error.",
            dictCancelUploadConfirmation: "¿Estás seguro de que quieres cancelar esta carga?",
            dictRemoveFileConfirmation: "¿Estás seguro de que quieres eliminar este archivo?",
            init: function() {
                const dropzone = this;

                // Override processQueue to do nothing when file is added
                this.processQueue = function() {
                    // Do nothing - we'll handle files manually in form submission
                };

                // Add method to create thumbnail from URL
                this.createThumbnailFromUrl = function(file, url) {
                    const previewElement = document.createElement('div');
                    previewElement.className = 'dz-preview dz-image-preview';
                    previewElement.setAttribute('data-dz-name', file.name);
                    previewElement.setAttribute('data-dz-size', file.size);
                    previewElement.setAttribute('data-dz-type', file.type);

                    previewElement.innerHTML = `
                        <div class="dz-image">
                            <img data-dz-thumbnail="" src="${url}" alt="${file.name}">
                        </div>
                    `;

                    return previewElement;
                };
            }
        });

        // Handle errors
        window.productsEditDropzone.on('error', function(file, errorMessage) {
            console.error('Dropzone error:', errorMessage);

            // Convert error message to string if it's an object
            let displayMessage = "Error al procesar la imagen";
            if (typeof errorMessage === 'string') {
                displayMessage = errorMessage;
            } else if (errorMessage && errorMessage.message) {
                displayMessage = errorMessage.message;
            } else if (errorMessage && errorMessage.error) {
                displayMessage = errorMessage.error;
            } else if (file && file.status) {
                switch(file.status) {
                    case 'error':
                        displayMessage = "Error al subir la imagen. Verifica que sea una imagen válida y que no exceda 2MB.";
                        break;
                    case 'invalid':
                        displayMessage = "Tipo de archivo no válido. Solo se permiten imágenes JPEG, JPG, PNG, GIF y SVG.";
                        break;
                    default:
                        displayMessage = "Error al procesar la imagen.";
                }
            }

            Swal.fire({
                text: displayMessage,
                icon: "error",
                buttonsStyling: false,
                confirmButtonText: "Ok",
                customClass: {
                    confirmButton: "btn fw-bold btn-primary",
                }
            });
        });
    }

    // Handle new category buttons for edit modal
    const editAddNewCategoryBtn = document.getElementById('edit_add_new_category_btn');
    const editCancelNewCategoryBtn = document.getElementById('edit_cancel_new_category_btn');
    const editNewCategoryInput = document.getElementById('edit_new_category_input');
    const editProductCategorySelect = document.getElementById('edit_product_category');

    if (editAddNewCategoryBtn) {
        editAddNewCategoryBtn.addEventListener('click', function() {
            editNewCategoryInput.classList.remove('d-none');
            editCancelNewCategoryBtn.classList.remove('d-none');
            editAddNewCategoryBtn.classList.add('d-none');
            editProductCategorySelect.disabled = true;
        });
    }

    if (editCancelNewCategoryBtn) {
        editCancelNewCategoryBtn.addEventListener('click', function() {
            editNewCategoryInput.classList.add('d-none');
            editCancelNewCategoryBtn.classList.add('d-none');
            editAddNewCategoryBtn.classList.remove('d-none');
            editProductCategorySelect.disabled = false;
            document.getElementById('edit_new_category_name').value = '';
        });
    }
});
</script>