@extends('admin.layouts.masterlayout')

@section('content')

<div class="main-content">
    <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
        <div class="breadcrumb-title pe-3">Add Product</div>

        <div class="ms-auto">
            <a href="{{ route('product.view') }}" class="btn btn-secondary d-flex gap-2"><i class="material-icons-outlined">arrow_back</i> Back</a>
        </div>
    </div>

    <div class="card">

        <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" required>
                            <option value="">Select Category</option>

                            @foreach($categories as $cat)
                            <option value="{{ $cat->id }}">{{ $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" required>
                            <option value="">Select Sub Category</option>
                        </select>
                    </div>

                    <!-- Name -->
                    <div class="col-md-4 mb-3">
                        <label>Product Name</label>
                        <input type="text" name="name" class="form-control" required>
                    </div>

                    <!-- Slug -->
                    <div class="col-md-4 mb-3">
                        <label>Slug</label>
                        <input type="text" name="slug" class="form-control" placeholder="Auto generate">
                    </div>

                    <!-- Price -->
                    <div class="col-md-4 mb-3">
                        <label>Price</label>
                        <input type="number" name="price" class="form-control" required>
                    </div>

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

                    <!-- Image -->
                    <div class="col-md-6 mb-3">
                        <label>Image</label>
                        <small class="text-muted">Allowed: JPG, PNG | Max size: 2MB</small>
                        <input type="file" name="images[]"  multiple accept=".jpg,.jpeg,.png" onchange="validateImages(event)" class="form-control">
                        @error('images.*')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                        <div id="preview-container" class="d-flex gap-2 mt-2"></div>
                    </div>

                    <!-- Status -->
                    <div class="col-md-6 mb-3">
                        <label>Status</label>
                        <select name="status" class="form-control">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>

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

                </div>

                <button class="btn btn-success">Save Product</button>

            </form>

        </div>

    </div>

</div>

@endsection

@push('scripts')

<script>
    // Subcategory load
    $('#category').change(function() {

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

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

            $('#subcategory').html('<option>Select</option>');

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

        });

    });

    // Image preview
    function validateImages(event) {
        let files = event.target.files;

        if (files.length > 4) {
            alert("You can upload maximum 4 images only!");

            event.target.value = ""; // reset input
            document.getElementById('preview-container').innerHTML = '';
            return;
        }

        // preview (optional)
        let container = document.getElementById('preview-container');
        container.innerHTML = '';

        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