@extends('layouts.admin')
@section('content')
<div class="main-content-inner">
    <div class="main-content-wrap">
        <div class="flex items-center flex-wrap justify-between gap20 mb-27">
            <h3>Add Products</h3>
            <ul class="breadcrumbs flex items-center flex-wrap justify-start gap10">
                <li><a href="{{ route('admin.index') }}"><div class="text-tiny">Dashboard</div></a></li>
                <li><i class="icon-chevron-right"></i></li>
                <li><a href="{{ route('admin.products') }}"><div class="text-tiny">Products</div></a></li>
                <li><i class="icon-chevron-right"></i></li>
                <li><div class="text-tiny">Add Products</div></li>
            </ul>
        </div>

        <form class="tf-section-2 form-add-product" method="POST" enctype="multipart/form-data" action="{{ route('admin.product.store') }}">
            @csrf
            <div class="wg-box">
                <fieldset class="name">
                    <div class="body-title mb-10">Nama Produk <span class="tf-color-1">*</span></div>
                    <input class="mb-10" type="text" placeholder="Masukkan nama produk"
                        name="name" tabindex="0" value="{{ old('name') }}" aria-required="true" required>
                    <div class="text-tiny">Jangan lebih dari 100 karakter saat memasukkan nama produk.</div>
                    @error('name') <span class="alert alert-danger">{{ $message }}</span> @enderror
                </fieldset>

                <fieldset class="name">
                    <div class="body-title mb-10">Slug <span class="tf-color-1">*</span></div>
                    <input class="mb-10" type="text" placeholder="Masukkan slug/judul produk"
                        name="slug" tabindex="0" value="{{ old('slug') }}" aria-required="true" required>
                    <div class="text-tiny">Jangan lebih dari 100 karakter saat memasukkan judul nama produk.</div>
                    @error('slug') <span class="alert alert-danger">{{ $message }}</span> @enderror
                </fieldset>

                <div class="gap22 cols">
                    <fieldset class="category">
                        <div class="body-title mb-10">Kategori <span class="tf-color-1">*</span></div>
                        <div class="select">
                            <select name="category_id" required>
                                <option value="">Pilih Kategori</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        @error('category_id') <span class="alert alert-danger">{{ $message }}</span> @enderror
                    </fieldset>

                    <fieldset class="brand">
                        <div class="body-title mb-10">Brand <span class="tf-color-1">*</span></div>
                        <div class="select">
                            <select name="brand_id" required>
                                <option value="">Pilih Brand</option>
                                @foreach ($brands as $brand)
                                    <option value="{{ $brand->id }}" {{ old('brand_id') == $brand->id ? 'selected' : '' }}>
                                        {{ $brand->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        @error('brand_id') <span class="alert alert-danger">{{ $message }}</span> @enderror
                    </fieldset>
                </div>

                <fieldset class="shortdescription">
                    <div class="body-title mb-10">Deskripsi Singkat Produk <span class="tf-color-1">*</span></div>
                    <textarea class="mb-10 ht-150" name="short_description" placeholder="Deskripsi Singkat Produk" tabindex="0" aria-required="true" required>{{ old('short_description') }}</textarea>
                    <div class="text-tiny">Jangan lebih dari 255 karakter saat memasukkan deskripsi singkat produk.</div>
                    @error('short_description') <span class="alert alert-danger">{{ $message }}</span> @enderror
                </fieldset>

                <fieldset class="description">
                    <div class="body-title mb-10">Deskripsi Lengkap Produk <span class="tf-color-1">*</span></div>
                    <textarea class="mb-10" name="description" placeholder="Deskripsi Lengkap Produk" tabindex="0" aria-required="true" required>{{ old('description') }}</textarea>
                    @error('description') <span class="alert alert-danger">{{ $message }}</span> @enderror
                </fieldset>
            </div>

            <div class="wg-box">
                <fieldset>
                    <div class="body-title">Upload Foto Produk <span class="tf-color-1">*</span></div>
                    <div class="upload-image flex-grow">
                        <div class="item" id="imgpreview" style="display:none">
                            <img src="" class="effect8" alt="Preview Foto Produk" style="max-width: 200px; max-height: 200px;">
                            <button type="button" id="removeMainImage" style="display:inline-block; margin-top:10px;">Remove</button>
                        </div>
                        <div id="upload-file" class="item up-load">
                            <label class="uploadfile" for="myFile">
                                <span class="icon"><i class="icon-upload-cloud"></i></span>
                                <span class="body-text">Drop your images here or select <span class="tf-color">click to browse</span></span>
                                <input type="file" id="myFile" name="image" accept="image/*" required>
                            </label>
                        </div>
                    </div>
                    @error('image') <span class="alert alert-danger">{{ $message }}</span> @enderror
                </fieldset>

                <fieldset>
                    <div class="body-title mb-10">Upload Gallery Produk</div>
                    <div class="upload-image mb-16" id="galleryPreviewWrapper">
                        <div id="galUpload" class="item up-load">
                            <label class="uploadfile" for="gFile">
                                <span class="icon"><i class="icon-upload-cloud"></i></span>
                                <span class="text-tiny">Drop your images here or select <span class="tf-color">click to browse</span></span>
                                <input type="file" id="gFile" name="images[]" accept="image/*" multiple>
                            </label>
                        </div>
                    </div>
                    @error('images') <span class="alert alert-danger">{{ $message }}</span> @enderror
                </fieldset>

                <div class="cols gap22">
                    <fieldset class="name">
                        <div class="body-title mb-10">Harga Produk <span class="tf-color-1">*</span></div>
                        <input class="mb-10" type="number" placeholder="Masukkan Harga Produk" name="regular_price" tabindex="0" value="{{ old('regular_price') }}" aria-required="true" required min="0" step="0.01">
                        @error('regular_price') <span class="alert alert-danger">{{ $message }}</span> @enderror
                    </fieldset>

                    <fieldset class="name">
                        <div class="body-title mb-10">Harga Jual <span class="tf-color-1">*</span></div>
                        <input class="mb-10" type="number" placeholder="Masukkan Harga Jual" name="sale_price" tabindex="0" value="{{ old('sale_price') }}" aria-required="true" required min="0" step="0.01">
                        @error('sale_price') <span class="alert alert-danger">{{ $message }}</span> @enderror
                    </fieldset>
                </div>

                <div class="cols gap22">
                    <fieldset class="name">
                        <div class="body-title mb-10">SKU <span class="tf-color-1">*</span></div>
                        <input class="mb-10" type="text" placeholder="Enter SKU (No produk)" name="SKU" tabindex="0" value="{{ old('SKU') }}" aria-required="true" required>
                        @error('SKU') <span class="alert alert-danger">{{ $message }}</span> @enderror
                    </fieldset>

                    <fieldset class="name">
                        <div class="body-title mb-10">Quantity <span class="tf-color-1">*</span></div>
                        <input class="mb-10" type="number" placeholder="Masukkan quantity" name="quantity" tabindex="0" value="{{ old('quantity') }}" aria-required="true" required min="0" step="1">
                        @error('quantity') <span class="alert alert-danger">{{ $message }}</span> @enderror
                    </fieldset>
                </div>

                <div class="cols gap22">
                    <fieldset class="name">
                        <div class="body-title mb-10">Stok</div>
                        <div class="select mb-10">
                            <select name="stock_status" required>
                                <option value="instock" {{ old('stock_status') == 'instock' ? 'selected' : '' }}>Tersedia</option>
                                <option value="outofstock" {{ old('stock_status') == 'outofstock' ? 'selected' : '' }}>Stok Habis</option>
                            </select>
                        </div>
                        @error('stock_status') <span class="alert alert-danger">{{ $message }}</span> @enderror
                    </fieldset>

                    <fieldset class="name">
                        <div class="body-title mb-10">Unggulan</div>
                        <div class="select mb-10">
                            <select name="featured" required>
                                <option value="0" {{ old('featured') == '0' ? 'selected' : '' }}>No</option>
                                <option value="1" {{ old('featured') == '1' ? 'selected' : '' }}>Yes</option>
                            </select>
                        </div>
                        @error('featured') <span class="alert alert-danger">{{ $message }}</span> @enderror
                    </fieldset>
                </div>

                <div class="cols gap10">
                    <button class="tf-button w-full" type="submit">Tambah Produk</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(function(){
        // Preview main image
        $("#myFile").on("change", function(e){
            const [file] = this.files;
            if(file){
                $("#imgpreview img").attr('src', URL.createObjectURL(file));
                $("#imgpreview").show();
            } else {
                $("#imgpreview").hide();
            }
        });

        // Remove main image preview and clear input
        $("#removeMainImage").on('click', function(){
            $("#imgpreview img").attr('src', '');
            $("#imgpreview").hide();
            $("#myFile").val('');
        });

        // Preview multiple gallery images with remove option
        $("#gFile").on("change", function(e){
            $("#galleryPreviewWrapper .gitems").remove(); // clear old previews
            const files = this.files;
            if(files.length > 0){
                for(let i=0; i<files.length; i++){
                    let fileURL = URL.createObjectURL(files[i]);
                    let imgItem = $('<div class="item gitems" style="position:relative; display:inline-block; margin:5px;"></div>');
                    let img = $('<img>').attr('src', fileURL).css({'max-width':'150px','max-height':'150px','border-radius':'5px'});
                    let removeBtn = $('<button type="button" style="position:absolute;top:2px;right:2px;background:#f44336;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">×</button>');

                    removeBtn.on('click', function(){
                        imgItem.remove();
                        // Update input files manually (complex, so best to reset input)
                        // Here we reset input to clear all files if any removed
                        $('#gFile').val('');
                    });

                    imgItem.append(img).append(removeBtn);
                    $("#galleryPreviewWrapper").prepend(imgItem);
                }
            }
        });

        // Auto-generate slug from product name
        $("input[name='name']").on("input", function(){
            let val = $(this).val();
            $("input[name='slug']").val(StringToSlug(val));
        });
    });

    function StringToSlug(text){
        return text.toLowerCase()
            .replace(/[^\w\s-]/g, '')
            .trim()
            .replace(/\s+/g, '-');
    }
</script>
@endpush