@props(['product' => new \App\Models\Product()])

<div class="card border-0 shadow-none">
    <div class="card-header collapsible cursor-pointer rotate" data-bs-toggle="collapse" data-bs-target="#product_general">
        <div class="card-title">
            <h3>A. General Information</h3>
        </div>
        <div class="card-toolbar rotate-180">
            <i class="ki-duotone ki-down fs-1"></i>
        </div>
    </div>
    <div id="product_general" class="collapse show">
        <div class="card-body">

            <h4 class="card-subtitle">Product Information</h4>

            <div class="card-subbody">
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label for="name" class="col-lg-3 col-form-label fw-semibold fs-6 required">Product Name</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="name" id="name" value="{{ old('name', $product->name) }}">
                        @error('name')
                        <span class="text-sm text-danger">
                            {{ $message }}
                        </span>
                        @enderror
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->

                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label for="brand" class="col-lg-3 col-form-label fw-semibold fs-6 required">Brand</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="brand" id="brand" value="{{ old('brand', $product->brand) }}">
                        @error('brand')
                        <span class="text-sm text-danger">
                            {{ $message }}
                        </span>
                        @enderror
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->

                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label for="model" class="col-lg-3 col-form-label fw-semibold fs-6 required">Model</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="model" id="model" value="{{ old('model', $product->model) }}" onkeypress="return preventComma(event)" onpaste="return preventCommaPaste(event)">
                        <small class="text-muted">Commas are not allowed in the model field</small>
                        @error('model')
                        <span class="text-sm text-danger">
                            {{ $message }}
                        </span>
                        @enderror
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
            </div>

            <h4 class="card-subtitle">Product Documents</h4>

            <div class="card-subbody">
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label for="image" class="col-lg-3 col-form-label fw-semibold fs-6 required">Image</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <!-- Dropzone Section (appears below the image) -->
                        <div class="dropzone dropzone-image" id="dzImage">
                            <!--begin::Message-->
                            <div class="dz-message needsclick">
                                <i class="ki-duotone ki-picture fs-3x"><span class="path1"></span><span class="path2"></span></i>
                                <!--begin::Info-->
                                <div class="ms-4">
                                    <h3 class="fs-5 fw-bold text-gray-900 mb-1">Drop files here or click to
                                        upload.</h3>
                                    <span class="fs-7 fw-semibold text-gray-500">Upload file</span>
                                </div>
                                <!--end::Info-->
                            </div>
                            <!--end::Message-->
                        </div>
                        <small class="text-muted">(Support JPEG/JPG/PNG format only, with Maximum size of 2MB per image)</small>
                        <div id="image-container">
                            @php
                            $oldImages = old('image', []);
                            $storedImages = $product->attachments->where('type', 'image')->pluck('path')->toArray();

                            $imagePaths = array_unique(!empty($oldImages) ? $oldImages : $storedImages);
                            @endphp

                            @if (!empty($imagePaths))
                            @foreach ($imagePaths as $image)
                            <input type="hidden" name="image[]" value="{{ $image }}" class="uploaded-image">
                            @endforeach
                            @endif
                        </div>
                        @error('image')
                        <span class="text-sm text-danger">
                            {{ $message }}
                        </span>
                        @enderror
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label for="image" class="col-lg-3 col-form-label fw-semibold fs-6 required">Product Brochure</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <!-- Dropzone Section (appears below the image) -->
                        <div class="dropzone dropzone-file" id="dzBrochure" style="margin-top: 5px;">
                            <!--begin::Message-->
                            <div class="dz-message needsclick">
                                <button type="button" class="btn btn-sm btn-secondary">Choose File</button>
                                <span class="align-self-center text-muted ms-2">No file selected</span>
                            </div>
                            <!--end::Message-->
                        </div>
                        <small class="text-muted">(Support PDF format only with max size of 10MB)</small>
                        <input type="hidden" name="brochure" id="brochure" value="{{ old('brochure', $product->attachments->firstWhere('type', 'brochure')?->path) }}">
                        @error('brochure')
                        <span class="text-sm text-danger">
                            {{ $message }}
                        </span>
                        @enderror
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
            </div>
        </div>
    </div>
</div>

<script>
    function preventComma(event) {
        if (event.key === ',') {
            event.preventDefault();
            showCommaError();
            return false;
        }
        return true;
    }

    function preventCommaPaste(event) {
        const pastedText = (event.clipboardData || window.clipboardData).getData('text');
        if (pastedText.includes(',')) {
            event.preventDefault();
            showCommaError();
            return false;
        }
        return true;
    }

    function showCommaError() {
        // Show a temporary error message
        const modelInput = document.getElementById('model');
        const errorDiv = document.createElement('div');
        errorDiv.className = 'text-sm text-danger mt-1';
        errorDiv.textContent = 'Commas are not allowed in the model field';

        // Remove any existing error message
        const existingError = modelInput.parentNode.querySelector('.text-sm.text-danger.mt-1');
        if (existingError) {
            existingError.remove();
        }

        // Add the new error message
        modelInput.parentNode.appendChild(errorDiv);

        // Remove the error message after 3 seconds
        setTimeout(() => {
            if (errorDiv.parentNode) {
                errorDiv.remove();
            }
        }, 3000);
    }
</script>