@extends('layouts.app')

@section('body-class', 'page-categories')

@section('content')
<x-front-breadcrumb type="route" value="sell.product" title="Sell your Products" />

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js" integrity="sha512-eyHL1atYNycXNXZMDndxrDhNAegH2BDWt1TmkXJPoGf1WLlNYt08CSjkqF5lnCRmdm3IrkHid8s2jOUY4NIZVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<style>
.form-section{
    display: none;
}

.form-section.current{
    display: inline;
}
.parsley-errors-list{
    color:red;
}
label { color:white; font-weight:bold }
</style>

<div class="container-fluid">
    <div class="row justify-content-md-center">
        <div class="col-md-9">
            <div class="card bg-dark px-5 py-3 mt-5 shadow">
                <h5 class="text-white text-center mt-3 mb-4">SELL US YOUR PRODUCTS</h5>
                
                <div class="nav nav-fill my-3">
                    <label class="nav-link shadow-sm step0 border ml-2">Category</label>
                    <label class="nav-link shadow-sm step1 border ml-2">Details</label>
                    <label class="nav-link shadow-sm step2 border ml-2">Personal Information</label>
                </div>

                @if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif

                 <form action="{{ front_route('product.store') }}" method="POST" enctype="multipart/form-data" class="employee-form">
                    @csrf
                    
                    <div class="form-section">
                      
                        <label for="category">Select Category:</label>
                        <select id="category" name="category" class="form-control mb-3" required>
                            <option value="">Select...</option>
                            <option style="font-weight: bold;" value="certified_inputs">Certified Inputs</option>
                            <option style="font-weight: bold;" value="dried_commodity">Dried Commodity</option>
                            <option style="font-weight: bold;" value="fresh_commodity">Fresh Commodity</option>
                        </select>
                        
                        <div id="subcategory-container" class="mt-3"></div>
                    </div>
                    
                    <div class="form-section">
                        <label for="variety">Variety/Type:</label>
                        <input type="text" class="form-control mb-3" name="variety" required>
                        <label for="quantity">Grade/Quality:</label>
                        <input type="text" class="form-control mb-3" name="quantity" required>
                        <label for="grade">Quantity (Kgs):</label>
                        <input type="text" class="form-control mb-3" name="grade" required>
                        <label for="selling_price">Selling Price (Kg):</label>
                        <input type="text" class="form-control mb-3" name="selling_price" required>
                        <label for="description">Description:</label>
                        <textarea name="description" class="form-control mb-3" cols="30" rows="5" required></textarea>
                        
                    </div>
                    
                    <div class="form-section">
    @if (!current_customer())
        <label for="name">First Name:</label>
        <input type="text" class="form-control mb-3" name="name" required>

        <label for="last_name">Last Name:</label>
        <input type="text" class="form-control mb-3" name="last_name" required>

        <label for="email">E-mail:</label>
        <input type="email" class="form-control mb-3" name="email" required>

        <label for="password">Password:</label>
        <input type="password" class="form-control mb-3" name="password" required>
    @else
        <!-- If logged in, store the user ID as a hidden input -->
        <input type="hidden" name="customer_id" value="{{ current_customer()->id }}">
    @endif

    <label for="phone">Phone (Whatsapp):</label>
    <input type="tel" class="form-control mb-3" name="phone" required>
</div>

                    
                    <div class="form-section">
                        <label>Product Images:</label>
                        <div id="imageContainer">
                            <div class="image-upload d-flex align-items-center">
                                <input type="file" name="images[]" class="image-input form-control" accept="image/*">
                                <button type="button" class="btn btn-success add-image mx-2">+</button>
                            </div>
                        </div>

                        <div id="imagePreview" class="d-flex flex-wrap mt-3"></div>

                        <label for="address">Address:</label>
                        <textarea name="address" class="form-control mb-3" cols="30" rows="5" required></textarea>
                        
                    </div>
                    
                    <div class="form-navigation mt-3">
                        <button type="button" class="previous btn btn-primary float-left">&lt; Previous</button>
                        <button type="button" class="next btn btn-danger float-right">Next &gt;</button>
                        <button type="submit" class="btn btn-success float-right">Submit</button>
                    </div>
                </form>
                
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        let imageContainer = document.getElementById('imageContainer');
        let previewBox = document.getElementById('imagePreview');

        function previewImage(input) {
            if (input.files && input.files[0]) {
                let reader = new FileReader();
                reader.onload = function (e) {
                    let div = document.createElement('div');
                    div.classList.add('image-preview-box', 'm-2', 'position-relative');

                    let img = document.createElement('img');
                    img.src = e.target.result;
                    img.classList.add('img-thumbnail');
                    img.style.width = "100px";
                    img.style.height = "100px";

                    let removeBtn = document.createElement('button');
                    removeBtn.innerHTML = '×';
                    removeBtn.classList.add('btn', 'btn-danger', 'btn-sm', 'position-absolute', 'top-0', 'end-0');
                    removeBtn.onclick = function () {
                        div.remove();
                        input.closest('.image-upload').remove();
                    };

                    div.appendChild(img);
                    div.appendChild(removeBtn);
                    previewBox.appendChild(div);
                };
                reader.readAsDataURL(input.files[0]);
            }
        }

        document.addEventListener('change', function (event) {
            if (event.target.classList.contains('image-input')) {
                previewImage(event.target);
            }
        });

        document.addEventListener('click', function (event) {
            if (event.target.classList.contains('add-image')) {
                let newImageUpload = document.createElement('div');
                newImageUpload.classList.add('image-upload', 'd-flex', 'align-items-center', 'mt-2');
                newImageUpload.innerHTML = `
                    <input type="file" name="images[]" class="image-input form-control" accept="image/*">
                    <button type="button" class="btn btn-danger remove-image mx-2">×</button>
                `;
                imageContainer.appendChild(newImageUpload);
            } else if (event.target.classList.contains('remove-image')) {
                event.target.closest('.image-upload').remove();
            }
        });
    });
</script>

<script>
    $(function() {
        var $sections = $('.form-section');

        function navigateTo(index) {
            $sections.removeClass('current').eq(index).addClass('current');
            $('.form-navigation .previous').toggle(index > 0);
            var atTheEnd = index >= $sections.length - 1;
            $('.form-navigation .next').toggle(!atTheEnd);
            $('.form-navigation [type=submit]').toggle(atTheEnd);
            $('.step' + index).css({ 'backgroundColor': '#17a2b8', 'color': 'white' });
        }

        function curIndex() {
            return $sections.index($sections.filter('.current'));
        }

        $('.form-navigation .previous').click(function() {
            navigateTo(curIndex() - 1);
        });

        $('.form-navigation .next').click(function() {
            $('.employee-form').parsley().whenValidate({
                group: 'block-' + curIndex()
            }).done(function() {
                navigateTo(curIndex() + 1);
            });
        });

        $sections.each(function(index, section) {
            $(section).find(':input').attr('data-parsley-group', 'block-' + index);
        });

        navigateTo(0);

        $('#category').change(function() {
            var category = $(this).val();
            var subcategories = {
                certified_inputs: [
                    { name: 'Certified Seeds', options: ['Beans', 'Sesame', 'Maize', 'Groundnuts'] },
                    { name: 'Fertilizers', options: ['Organic', 'Inorganic'] }
                ],
                dried_commodity: [
                    { name: 'Grains', options: ['Soya', 'Groundnuts', 'Sesame', 'Rice'] },
                    { name: 'Pulses', options: ['Peagion Pea', 'Cow Pea', 'Beans'] }
                ],
                fresh_commodity: [
                    { name: 'Roots and Tubers', options: ['Irishpotato'] },
                    { name: 'Fruits and Vegs', options: [] }
                ]
            };

            $('#subcategory-container').html('');
            if (subcategories[category]) {
                var subcategoryHtml = '<label for="subcategory">Select Subcategory:</label><select id="subcategory" name="subcategory" class="form-control mb-3"><option value="">Select...</option>';
                subcategories[category].forEach(function(sub) {
                    subcategoryHtml += '<option value="' + sub.name + '">' + sub.name + '</option>';
                });
                subcategoryHtml += '</select>';
                $('#subcategory-container').html(subcategoryHtml);

                $('#subcategory').change(function() {
                    var selectedSub = $(this).val();
                    var subOptions = subcategories[category].find(s => s.name === selectedSub);
                    if (subOptions && subOptions.options.length > 0) {
                        var productHtml = '<label for="product">Select Product:</label><select id="product" name="product" class="form-control mb-3"><option value="">Select...</option>';
                        subOptions.options.forEach(function(prod) {
                            productHtml += '<option value="' + prod + '">' + prod + '</option>';
                        });
                        productHtml += '</select>';
                        $('#subcategory-container').append(productHtml);
                    }
                });
            }
        });
    });
</script>
@endsection