@if(!$lakuemas_sku)
    <div class="alert alert-danger">Code SKU tidak ditemukan, segera hubungi tim IT !</div>
@else
    <form method="post" action="{{ url('webstore/product/save_sukha') }}" enctype="multipart/form-data">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <input type="hidden" name="product_id" value="{{ $product->id }}">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle"><i class="fa fa-cubes"></i> Webstore Edit Product Sukha Form</h5>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-sm-12 mb-15">
                    <div class="labelForm">Product Category</div>
                    <div>
                        {{-- <select name="category_sku" id="category_sku" class="form-control" onchange="getSKUsukha()" required>
                            @foreach($categories as $category)
                                <option value="{{ $category->sku }}" @if($product->id) selected @endif>{{ $category->product_name }}</option>
                            @endforeach
                        </select> --}}
                        <select name="category" class="form-control">
                            {{-- <option value="" disabled selected>Choose Product Category</option> --}}
                            <option value="" disabled selected>Voucher Nominal</option>
                        </select>
                    </div>
                </div>

                <div class="col-sm-12 mb-15">
                    <div class="labelForm">SKU</div>
                        <div id="skuEditSukhaData">
                            <input type="hidden" name="sku_sukha" value="{{ $lakuemas_sku->id }}" readonly>
                            <select name="sku_sukha" id="sku_sukha" class="form-control" required>
                                <option value="" disabled selected>Choose SKU</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}"
                                            {{ $lakuemas_sku && $lakuemas_sku->id == $category->id ? 'selected' : '' }}>
                                            {{ $category->product_name }}
                                        </option>
                                    @endforeach
                                </select>
                        </div>
                    <div id="skuFormSukha" style="display: none;"></div>
                </div>
                
                <div class="col-sm-12 mb-15">
                    <div class="labelForm">Voucher Name</div>
                    <div><input type="text" class="form-control" id="voucher_name" name="voucher_name" placeholder="name voucher" value="{{ $product->name }}" required></div>
                </div>

                <div class="col-sm-12 mb-15">
                    <div class="labelForm">Description</div>
                    <div><textarea class="summernote" id="description" name="description" placeholder="deskripsi" required>{{ $product->description }}</textarea></div>
                </div>
                
                <div class="col-sm-12 mb-15">
                    <div class="labelForm">Price</div>
                    <div><input type="number" class="form-control" id="price" name="price" placeholder="harga coret" value="{{ $product->price }}" required></div>
                </div>

                <div class="col-sm-12 mb-15">
                    <div class="labelForm">Fix Price</div>
                    <div><input type="number" class="form-control" id="fix_price" name="fix_price" placeholder="harga fix" value="{{ $product->current_price }}" required></div>
                </div>

                <div class="col-sm-12 mb-15">
                    <div class="labelForm">Status Product</div>
                    <div>
                        <select name="status_product" id="status_product" class="form-control">
                            <option value="1" @if($product->status == '1') selected @endif>Active</option>
                            <option value="0" @if($product->status == '0') selected @endif>Non Active</option>
                        </select>    
                    </div>
                </div>

                <div class="col-sm-12 mb-15">
                    <div class="labelForm">Image View</div>
                    <td class="text-center">
                        @if($product->img_thumbnail)
                            <img src="{{ env('ALIYUN_OSS_IMAGE_URL') . '/ecommerce/product/' . $product->img_thumbnail }}" width="60">
                        @else
                            <img src="{{ asset('images/no-img.jpg') }}" width="60">
                        @endif
                    </td>
                </div>

                <div class="col-sm-12 mb-15">
                    <div class="labelForm">Image</div>
                    <div id="previewWrapper" style="margin-bottom:10px;">
                        <img id="previewImage" src="" alt="Preview" style="max-width:200px; display:none; border:1px solid #ddd; padding:5px; border-radius:5px;">
                    </div>
                    <div><input type="file" class="form-control" name="image" id="image" accept=".jpg,.jpeg,.png" ></div>
                </div>


            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary">Add</button>
        </div>
    </form>
@endif
<script>
document.getElementById('image').addEventListener('change', function(e) {
    const file = e.target.files[0];
    const preview = document.getElementById('previewImage');

    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            preview.src = e.target.result;
            preview.style.display = 'block';
        }
        reader.readAsDataURL(file);
    } else {
        preview.src = "";
        preview.style.display = 'none';
    }
});
</script>