@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_3a">
        <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_3a" class="collapse show">
        <div class="card-body">

            <h4 class="card-subtitle">General Product Information</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="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-->
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label for="dimension" class="col-lg-3 col-form-label fw-semibold fs-6 required">Dimension</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <div class="d-flex align-items-center">
                            <input type="number" class="form-control form-control-sm w-md-75px" name="dimension_w" id="dimension_w" value="{{ old('dimension_w', $product->dimension_w) }}"> <span class="ms-1">mm</span>
                            <span class="ms-5 me-3">x</span>
                            <input type="number" class="form-control form-control-sm w-md-75px" name="dimension_l" id="dimension_l" value="{{ old('dimension_l', $product->dimension_l) }}"> <span class="ms-1">mm</span>
                            <span class="ms-5 me-3">x</span>
                            <input type="number" class="form-control form-control-sm w-md-75px" name="dimension_h" id="dimension_h" value="{{ old('dimension_h', $product->dimension_h) }}"> <span class="ms-1">mm</span>
                        </div>
                        @error('dimension_w')
                        <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 class="col-lg-3 col-form-label fw-semibold fs-6 required">Display Size</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <div class="d-flex align-items-center">
                            <input type="number" class="form-control form-control-sm w-75px" name="display_size" id="display_size" value="{{ old('display_size', $product->display_size) }}"> <span class="ms-1">inch</span>
                        </div>
                        @error('display_size')
                        <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 class="col-lg-3 col-form-label fw-semibold fs-6 required">Resolution</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <div class="d-flex align-items-center">
                            <input type="number" class="form-control form-control-sm w-75px" name="resolution" id="resolution" value="{{ old('resolution', $product->resolution) }}"> <span class="ms-1">pixel</span>
                        </div>
                        @error('resolution')
                        <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 class="col-lg-3 col-form-label fw-semibold fs-6 required">Weight</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <div class="d-flex align-items-center">
                            <input type="number" class="form-control form-control-sm w-75px" name="weight" id="weight" value="{{ old('weight', $product->weight) }}"> <span class="ms-1">kg</span>
                        </div>
                        @error('weight')
                        <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 class="col-lg-3 col-form-label fw-semibold fs-6 required">List of Battery Capacity</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <div class="d-flex align-items-center">
                            <input type="number" class="form-control form-control-sm w-75px" name="battery_capacity" id="battery_capacity" value="{{ old('battery_capacity', $product->battery_capacity) }}"> <span class="ms-1">MaH/WH</span>
                        </div>
                        @error('battery_capacity')
                        <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>

            <h4 class="card-subtitle">Manufacturer / Seller Information</h4>

            <div class="card-subbody">
                <h4>Ownership</h4>
                <p>Manufacturer</p>

                <hr>

                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label for="mfr_country" class="col-lg-3 col-form-label fw-semibold fs-6 required">Country of Manufacturing</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="mfr_country" id="mfr_country" value="{{ old('mfr_country', $product->mfr_country) }}">
                        @error('mfr_country')
                        <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="mfr_office" class="col-lg-3 col-form-label fw-semibold fs-6 required">Manufacturer Sales Office</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="mfr_office" id="mfr_office" value="{{ old('mfr_office', $product->mfr_office) }}">
                        @error('mfr_office')
                        <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="mfr_website" class="col-lg-3 col-form-label fw-semibold fs-6 required">Manufacturer Website</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="mfr_website" id="mfr_website" value="{{ old('mfr_website', $product->mfr_website) }}">
                        @error('mfr_website')
                        <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="mfr_phone_no" class="col-lg-3 col-form-label fw-semibold fs-6 required">Contact Person's Phone</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="mfr_phone_no" id="mfr_phone_no" value="{{ old('mfr_phone_no', $product->mfr_phone_no) }}">
                        @error('mfr_phone_no')
                        <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="mfr_email" class="col-lg-3 col-form-label fw-semibold fs-6 required">Contact Person's Email</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="mfr_email" id="mfr_email" value="{{ old('mfr_email', $product->mfr_email) }}">
                        @error('mfr_email')
                        <span class="text-sm text-danger">
                            {{ $message }}
                        </span>
                        @enderror
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->

                @if ($application->product_ownership == \App\Models\Application::PO_RESELLER)
                <br>

                <p>Distributor/Trader</p>

                <hr>

                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label for="distr_name" class="col-lg-3 col-form-label fw-semibold fs-6 required">Distributor/Trader Name</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="distr_name" id="distr_name" value="{{ old('distr_name', $product->distr_name) }}">
                        @error('distr_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="distr_country" class="col-lg-3 col-form-label fw-semibold fs-6 required">Country of Manufacturing</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="distr_country" id="distr_country" value="{{ old('distr_country', $product->distr_country) }}">
                        @error('distr_country')
                        <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="distr_office" class="col-lg-3 col-form-label fw-semibold fs-6 required">Distributor Sales Office</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="distr_office" id="distr_office" value="{{ old('distr_office', $product->distr_office) }}">
                        @error('distr_office')
                        <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="distr_website" class="col-lg-3 col-form-label fw-semibold fs-6 required">Distributor/Trader Website</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="distr_website" id="distr_website" value="{{ old('distr_website', $product->distr_website) }}">
                        @error('distr_website')
                        <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="distr_phone_no" class="col-lg-3 col-form-label fw-semibold fs-6 required">Contact Person's Phone</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="distr_phone_no" id="distr_phone_no" value="{{ old('distr_phone_no', $product->distr_phone_no) }}">
                        @error('distr_phone_no')
                        <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="distr_email" class="col-lg-3 col-form-label fw-semibold fs-6 required">Contact Person's Email</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="distr_email" id="distr_email" value="{{ old('distr_email', $product->distr_email) }}">
                        @error('distr_email')
                        <span class="text-sm text-danger">
                            {{ $message }}
                        </span>
                        @enderror
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
                @if ($authorizationLetter = $application->attachments->firstWhere('type', 'authorization_letter'))
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label class="col-lg-3 col-form-label fw-semibold fs-6 required">Authorization Letter From Manufacturer</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <p class="form-control form-control-sm form-control-solid"><a href="{{ assetFile($authorizationLetter->path) }}" target="_blank" rel="noopener noreferrer">Authorization Letter</a></p>
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
                @endif
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label class="col-lg-3 col-form-label fw-semibold fs-6 required">Made In Malaysia</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8 align-self-center">
                        <div class="form-check form-check-xs form-check-success form-check-inline">
                            <input class="form-check-input" type="radio" name="distr_malaysia" id="distr_malaysia_1" value="1" @checked(old('distr_malaysia', $product->distr_malaysia) == 1)>
                            <label class="form-check-label" for="distr_malaysia_1">Yes</label>
                        </div>
                        <div class="form-check form-check-xs form-check-success form-check-inline">
                            <input class="form-check-input" type="radio" name="distr_malaysia" id="distr_malaysia_0" value="0" @checked(old('distr_malaysia', $product->distr_malaysia) == 0)>
                            <label class="form-check-label" for="distr_malaysia_0">No</label>
                        </div>
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label class="col-lg-3 col-form-label fw-semibold fs-6 required">Bumiputera</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8 align-self-center">
                        <div class="form-check form-check-xs form-check-success form-check-inline">
                            <input class="form-check-input" type="radio" name="distr_bumiputera" id="distr_bumiputera_1" value="1" @checked(old('distr_bumiputera', $product->distr_bumiputera) == 1)>
                            <label class="form-check-label" for="distr_bumiputera_1">Yes</label>
                        </div>
                        <div class="form-check form-check-xs form-check-success form-check-inline">
                            <input class="form-check-input" type="radio" name="distr_bumiputera" id="distr_bumiputera_0" value="0" @checked(old('distr_bumiputera', $product->distr_bumiputera) == 0)>
                            <label class="form-check-label" for="distr_bumiputera_0">No</label>
                        </div>
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label class="col-lg-3 col-form-label fw-semibold fs-6 required">Registered With E-perolehan</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8 align-self-center">
                        <div class="form-check form-check-xs form-check-success form-check-inline">
                            <input class="form-check-input" type="radio" name="distr_e_perolehan" id="distr_e_perolehan_1" value="1" @checked(old('distr_e_perolehan', $product->distr_e_perolehan) == 1)>
                            <label class="form-check-label" for="distr_e_perolehan_1">Yes</label>
                        </div>
                        <div class="form-check form-check-xs form-check-success form-check-inline">
                            <input class="form-check-input" type="radio" name="distr_e_perolehan" id="distr_e_perolehan_0" value="0" @checked(old('distr_e_perolehan', $product->distr_e_perolehan) == 0)>
                            <label class="form-check-label" for="distr_e_perolehan_0">No</label>
                        </div>
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
                @endif

            </div>

            <h4 class="card-subtitle">Recommended Retail Price (RRP) (Optional)</h4>

            <div class="card-subbody">
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label for="recommended_rrp" class="col-lg-3 col-form-label fw-semibold fs-6">Recommended Retail Price (RRP)</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="recommended_rrp" id="recommended_rrp" value="{{ old('recommended_rrp', $product->recommended_rrp) }}">
                        @error('recommended_rrp')
                        <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>