@extends('admin.layouts.masterlayout')

@section('content')

<div class="main-content">

    <div class="card">

        <div class="card-header d-flex justify-content-between">
            <h5>Edit Product</h5>

            <a href="{{ route('product.view') }}" class="btn btn-secondary btn-sm">
                Back
            </a>
        </div>

        <div class="card-body">

            <form method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row">

                    <!-- Category -->
                    <div class="col-md-4 mb-3">
                        <label>Category</label>
                        <select name="category_id" id="category" class="form-control">

                            @foreach($categories as $cat)
                            <option value="{{ $cat->id }}"
                                @if($product->category_id == $cat->id) selected @endif>
                                {{ $cat->name }}
                            </option>
                            @endforeach

                        </select>
                    </div>

                    <!-- Sub Category -->
                    <div class="col-md-4 mb-3">
                        <label>Sub Category</label>
                        <select name="sub_category_id" id="subcategory" class="form-control">

                            @foreach($subcategories as $sub)
                            <option value="{{ $sub->id }}"
                                @if($product->sub_category_id == $sub->id) selected @endif>
                                {{ $sub->name }}
                            </option>
                            @endforeach

                        </select>
                    </div>

                    <!-- Name -->
                    <div class="col-md-4 mb-3">
                        <label>Product Name</label>
                        <input type="text" name="name" value="{{ $product->name }}" class="form-control">
                    </div>

                    <!-- Slug -->
                    <div class="col-md-4 mb-3">
                        <label>Slug</label>
                        <input type="text" name="slug" value="{{ $product->slug }}" class="form-control">
                    </div>

                    <!-- Price -->
                    <div class="col-md-4 mb-3">
                        <label>Price</label>
                        <input type="number" name="price" value="{{ $product->price }}" class="form-control">
                    </div>

                    <!-- Stock -->
                    <div class="col-md-4 mb-3">
                        <label>Stock</label>
                        <input type="number" name="stock" value="{{ $product->stock }}" class="form-control">
                    </div>

                    <!-- Image -->
                    <div class="col-md-6 mb-3">
                        <label>Existing Images</label>
                        <small class="text-muted">Allowed: JPG, PNG | Max size: 2MB</small>
                        <div class="d-flex gap-2 flex-wrap">

                            @foreach($product->all_images as $img)
                                <img src="{{ asset('storage/products/'.$img) }}" width="60">
                            @endforeach

                        </div>

                        <input type="file" name="images[]"  multiple accept=".jpg,.jpeg,.png" class="form-control mt-2" onchange="previewImages(event)">
                        @error('images.*')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror

                        <div id="preview-container" class="d-flex gap-2 flex-wrap mt-2"></div>
                    </div>

                    <!-- Status -->
                    <div class="col-md-6 mb-3">
                        <label>Status</label>
                        <select name="status" class="form-control">

                            <option value="1" @if($product->status==1) selected @endif>Active</option>
                            <option value="0" @if($product->status==0) selected @endif>Inactive</option>

                        </select>
                    </div>

                    <!-- Description -->
                    <div class="col-md-12 mb-3">
                        <label>Description</label>
                        <textarea name="description" class="form-control">{{ $product->description }}</textarea>
                    </div>

                </div>

                <button class="btn btn-primary">Update Product</button>

            </form>

        </div>

    </div>

</div>

@endsection

@push('scripts')

<script>
    // change category → reload subcategory
    $('#category').change(function() {

        let id = $(this).val();

        $.get('/products/get-subcategory/' + id, function(data) {

            $('#subcategory').html('');

            $.each(data, function(i, val) {
                $('#subcategory').append('<option value="' + val.id + '">' + val.name + '</option>');
            });

        });

    });

    function previewImages(event) {
        let container = document.getElementById('preview-container');
        container.innerHTML = '';

        let files = event.target.files;

        for (let i = 0; i < files.length; i++) {
            let reader = new FileReader();

            reader.onload = function(e) {
                let img = document.createElement('img');
                img.src = e.target.result;
                img.width = 80;
                container.appendChild(img);
            }

            reader.readAsDataURL(files[i]);
        }
    }
</script>

@endpush