@extends('layouts.app')
@section('content')
    <div class="page-header">
        <div class="row">
            <div class="col-md-6 col-sm-12">
                <div class="title">
                    <h4>Form</h4>
                </div>
                <nav aria-label="breadcrumb" role="navigation">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Product</li>
                    </ol>
                    <a href="{{route('admin.product.index')}}" class="btn btn-success">Back</a>
                </nav>
            </div>
        </div>
    </div>
    <div class="card-box pd-20 height-100-p mb-30">
        <div class="row">
            <div class="col-md-12">
                <form action="{{route('admin.product.store')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <label>
                                Name
                            </label>
                            <input class="form-control" type="text" name="name" placeholder="Product Name" required>

                            <label>
                                Price
                            </label>
                            <input class="form-control" type="number" name="price" placeholder="$">

                            <label>
                                Category
                            </label>
                            <select class="form-control" name="category_id[]" multiple>
                                @foreach($categories as $category)
                                    <option value="{{$category->id}}">
                                        {{$category->name}}
                                    </option>
                                @endforeach
                            </select>

                            <div class="my-3" id="variationContainer">
                                <button class="btn btn-sm btn-success add-variation mb-3" type="button">Add Variation
                                </button>
                            </div>

                            <label>
                                Image
                            </label>
                            <input class="form-control" type="file" name="image" onchange="previewImage(this)">
                            <div id="image-preview"></div>

                        </div>
                    </div>
                    <br>
                    <button type="submit" class="btn btn-primary btn-sm scroll-click collapsed">Submit</button>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('page_scripts')
    <script>
        function previewImage(input) {
            var imagePreviewContainer = document.getElementById('image-preview');

            // Clear previous previews
            imagePreviewContainer.innerHTML = '';

            // Check if a file is selected
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    var img = document.createElement('img');
                    img.src = e.target.result;
                    img.alt = 'Image Preview';
                    img.style.maxWidth = '300px';
                    img.style.marginTop = '10px';
                    imagePreviewContainer.appendChild(img);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }

        $(function () {
            const variationHtml = `@include('admin.product.partials.variation-input', ['variation' => null])`
            $(document).on('change', '.sel-variation-type', function (e) {
                $(this).parent().find(`.sel-variation-value > option`).addClass('d-none')
                $(this).parent().find(`.sel-variation-value > option[data-type=${$(this).val()}]`).removeClass('d-none')
                $(this).parent().find(`.sel-variation-value`).val('')
            })

            $(document).on('click', '.del-variation', function (e) {
                e.preventDefault()
                $(this).parent().remove()
            })

            $(document).on('click', '.add-variation', function (e) {
                e.preventDefault()
                $('#variationContainer').append(variationHtml)
            })
        })
    </script>
@endpush