@extends('layouts.app')

<style>
    .card-body {
        background-color: #f1f1f1;
    }

    input#product_image {
        padding: 1em;
        height: 4em;
    }

    #country-select option img {
        margin-right: 8px;
        vertical-align: middle;
    }

    table td {
        padding: 0.5em;
        vertical-align: middle;
    }

    .table-borderless td,
    .table-borderless th {
        border: none;
    }

    .item-create .card-body {
        padding: 0 1em !important;
    }

    .item-create td {
        padding-top: 0 !important;
    }

    .item-create tr td:first-child {
        padding-left: 0 !important;
    }

    .item-create tr td:last-child {
        padding-right: 0 !important;
    }

    #generate-variations {
        font-size: 12px;
    }
</style>

@section('content')
<div class=" content item-create">
    <div class="card">
        <div class="card-body">
            <h5 class="text-center">Create Item</h5>
            <form action="{{ route('items.store') }}" method="POST" id="item-form" enctype="multipart/form-data">
                @csrf
                <table class="table table-borderless">
                    <tbody>
                        <tr>
                            <th colspan="2" class="bg-light" width="16.66%"><label for="name">Item Name</label></th>
                            <th class="bg-light" width="16.66%"><label for="unique_code">Item code/Barcode</label></th>
                            <th class="bg-light" width="16.66%"><label for="category_id" class="form-label">Category</label></th>
                            <th class="bg-light" width="16.66%"><label for="unit_id" class="form-label">Unit</label></th>
                            <th class="bg-light" width="16.66%"><label for="alt_unit_id" class="form-label">Alt Unit</label></th>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" required>
                                @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </td>
                            <td>
                                <input type="text" class="form-control @error('unique_code') is-invalid @enderror" id="unique_code" name="unique_code" required>
                                @error('unique_code')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </td>
                            <td>
                                <select class="form-select select2 w-100 @error('category_id') is-invalid @enderror" id="category_id" name="category_id">
                                    <option value="">None</option>
                                    @foreach ($categories as $category)
                                    @include('inventory.category._category_option', ['category' => $category, 'level' => 0])
                                    @endforeach
                                </select>
                                @error('category_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </td>

                            <td>
                                <select class="form-select select2 w-100 @error('unit_id') is-invalid @enderror" id="unit_id" name="unit_id">
                                    <option value="">None</option>
                                    @foreach ($units as $unit)
                                    <option value="{{ $unit->id }}">{{ $unit->unit_name }}</option>
                                    @endforeach
                                </select>
                                @error('unit_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </td>

                            <td>
                                <select class="form-select select2 w-100 @error('alt_unit_id') is-invalid @enderror" id="alt_unit_id" name="alt_unit_id">
                                    <option value="">None</option>
                                    @foreach ($units as $unit)
                                    <option value="{{ $unit->id }}">{{ $unit->unit_name }}</option>
                                    @endforeach
                                </select>
                                @error('alt_unit_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </td>

                        </tr>

                        <tr>
                            <th class="bg-light" width="16.66%"><label for="vat">VAT (%)</label></th>
                            <th class="bg-light" width="16.66%"><label for="warranty_months">Warranty Months (If Any)</label></th>
                            <th class="bg-light" width="16.66%"><label for="min_stock">Min Stock</label></th>
                            <th class="bg-light" width="16.66%"><label for="rack_no">Rack No</label></th>
                            <th class="bg-light" width="16.66%"><label for="reorder_quantity">Reorder Quantity</label></th>
                            <th class="bg-light" width="16.66%"><label for="product_type" class="form-label">Product Type</label></th>
                        </tr>
                        <tr>
                            <td>
                                <input type="number" step="0.01" class="form-control @error('vat') is-invalid @enderror" id="vat" name="vat" min="0">
                                @error('vat')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </td>
                            <td>
                                <input type="number" class="form-control @error('warranty_months') is-invalid @enderror" id="warranty_months" name="warranty_months" min="0">
                                @error('warranty_months')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </td>
                            <td>
                                <input type="number" class="form-control @error('min_stock') is-invalid @enderror" id="min_stock" name="min_stock" min="0">
                                @error('min_stock')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </td>
                            <td>
                                <input type="text" class="form-control @error('rack_no') is-invalid @enderror" id="rack_no" name="rack_no">
                                @error('rack_no')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </td>
                            <td>
                                <input type="number" class="form-control @error('reorder_quantity') is-invalid @enderror" id="reorder_quantity" name="reorder_quantity" min="0">
                                @error('reorder_quantity')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </td>
                            <td>
                                <select class="form-select w-100 select2 @error('product_type') is-invalid @enderror" id="product_type" name="product_type">
                                    <option value="Ready Products">Ready Products</option>
                                    <option value="Service">Service</option>
                                    <option value="Raw Material">Raw Material</option>
                                </select>

                                @error('product_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </td>
                        </tr>

                        <tr>
                            <th class="bg-light" width="16.66%"><label for="country">Country of Origin</label></th>
                            <th class="bg-light" width="16.66%"><label for="hs_code">HS Code</label></th>
                            <th colspan="2" class="bg-light" width="16.66%"><label for="description">Description</label></th>
                            <th colspan="2" class="bg-light" width="16.66%"><label for="product_image">Product Image</label></th>
                        </tr>

                        <tr>
                            <td>
                                <select name="country" id="country-select" class="form-select select2 w-100 @error('country') is-invalid @enderror">
                                    <option value="">Select a Country</option>
                                </select>
                                @error('country')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </td>
                            <td>
                                <input type="text" class="form-control @error('hs_code') is-invalid @enderror" id="hs_code" name="hs_code">
                                <small>( Please type 12 Digit HS code )</small>
                                @error('hs_code')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </td>
                            <td colspan="2">
                                <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description"></textarea>
                                @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </td>
                            <td colspan="2">
                                <div class="row" style="background-color: #fff; margin: 0;">
                                    <div class="col-md-8">
                                        <input type="file" class="@error('product_image') is-invalid @enderror" id="product_image" name="product_image" accept="image/*" onchange="previewImage(event)">
                                    </div>
                                    <div class="col-md-4">
                                        <img id="image_preview" src="" alt="Image Preview" class="mt-2" style="max-width: 48px; display: none; float:right">
                                    </div>
                                </div>
                                @error('product_image')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </td>
                        </tr>

                    </tbody>
                </table>

                <!-- Variations and Attributes Section -->
                <div class="card mt-4">
                    <div class="card-body">
                        <div class="row my-2">
                            <div class="col-md-6">
                                <h6 class="text-center">Select Attributes and Values</h6>
                                <table class="table table-borderless">
                                    <tbody>
                                        <tr>
                                            @foreach($attributes as $attribute)
                                            <th class="bg-light p-1">
                                                <label>{{ $attribute->name }}</label>
                                            </th>
                                            @endforeach
                                        </tr>
                                        <tr>
                                            @foreach($attributes as $attribute)
                                            <td class="p-1">
                                                <div class="form-group p-1">
                                                    <select name="attributes[{{ $attribute->id }}][]" class="form-control form-control-sm attribute-select" multiple>
                                                        @foreach($attribute->values as $value)
                                                        <option value="{{ $value->id }}">{{ $value->value }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </td>
                                            @endforeach
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- Button to Generate Variations -->
                                <button type="button" class="btn btn-success" id="generate-variations">Generate Variations</button>
                            </div>
                        <div class="col-md-6">
                            <!-- Step 2: Display Generated Variations -->
                            <div id="variations-container" style="display:none;" class="mb-2">
                            </div>
                        </div>
                    </div>
                    <br>
                    <button type="submit" class="btn btn-primary mb-4" style="float: right;">Save</button>
                </div>
        </div>

        </form>
    </div>
</div>
</div>


<script>
    document.addEventListener('DOMContentLoaded', function() {
        fetch('https://restcountries.com/v3.1/all')
            .then(response => response.json())
            .then(countries => {
                // Sort countries alphabetically by name
                countries.sort((a, b) => a.name.common.localeCompare(b.name.common));

                let countrySelect = document.getElementById('country-select');
                countries.forEach(country => {
                    let option = document.createElement('option');

                    // Use cca2 (ISO 3166-1 alpha-2 code) as value
                    option.value = country.name.common;

                    // Display flag alongside country name
                    option.innerHTML = `<img src="${country.flags.svg}" alt="${country.name.common} flag" style="width: 20px; height: 14px;"> ${country.name.common}`;

                    countrySelect.appendChild(option);
                });
            })
            .catch(error => console.error('Error fetching countries:', error));
    });
</script>


<script>
    function previewImage(event) {
        const input = event.target;
        const preview = document.getElementById('image_preview');

        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result; // Set the src of the img tag
                preview.style.display = 'block'; // Show the img tag
            }
            reader.readAsDataURL(input.files[0]); // Read the file as a data URL
        }
    }
</script>
<script>
    document.getElementById('generate-variations').addEventListener('click', function() {
        // Step 1: Collect selected attribute values
        const selectedAttributes = [];
        document.querySelectorAll('.attribute-select').forEach(function(select) {
            if (select.selectedOptions.length > 0) {
                const attributeId = select.name.match(/\d+/)[0];
                const values = Array.from(select.selectedOptions).map(option => ({
                    id: option.value,
                    text: option.text,
                }));
                selectedAttributes.push({
                    attributeId,
                    values
                });
            }
        });

        // Step 2: Generate all combinations of selected attribute values
        const combinations = generateCombinations(selectedAttributes);

        // Step 3: Display generated variations as bold, comma-separated text
        const container = document.getElementById('variations-container');
        container.innerHTML = ''; // Clear previous variations
        container.innerHTML = '<h6 class="text-center mb-1">Generated Variations</h6>'; // Clear previous variations
        combinations.forEach((combination, index) => {
            const variationText = combination.map(attr => attr.text).join('-');
            const variationButton = document.createElement('button');
            variationButton.textContent = `${index + 1}. ${variationText}`;

            // Set the button type to prevent form submission
            variationButton.type = 'button';

            // Tablet-style button CSS
            variationButton.style.fontWeight = 'bold';
            variationButton.style.fontSize = '12px';
            variationButton.style.border = '1px solid #000';
            variationButton.style.padding = '5px 10px';
            variationButton.style.margin = '5px';
            variationButton.style.borderRadius = '25px';
            variationButton.style.backgroundColor = '#800000';
            variationButton.style.color = '#fff';
            variationButton.style.cursor = 'text';

            container.appendChild(variationButton);
        });
        container.style.display = 'block';
    });

    // Function to generate all combinations of selected attribute values
    function generateCombinations(attributes) {
        if (attributes.length === 0) return [
            []
        ];
        const combinations = [];
        const restCombinations = generateCombinations(attributes.slice(1));
        attributes[0].values.forEach(value => {
            restCombinations.forEach(combination => {
                combinations.push([{
                    id: value.id,
                    text: value.text
                }, ...combination]);
            });
        });
        return combinations;
    }
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const inputs = document.querySelectorAll('input, select, textarea');

        inputs.forEach((input, index) => {
            input.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    const nextInput = inputs[index + 1];
                    if (nextInput) {
                        nextInput.focus();
                    }
                }
            });
        });
    });
</script>
@endsection