@extends('layouts.admin')

@section('content')
<div class="container">
    <h1>Add Product</h1>
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <form action="{{ route('products.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="mb-3">
            <label for="merchant_id" class="form-label">Merchant</label>
            <select class="form-control" id="merchant_id" name="merchant_id" required></select>
            @error('merchant_id')
                <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>
        <div class="mb-3">
            <label for="price" class="form-label">Price</label>
            <input type="number" step="0.01" min="0" class="form-control" id="price" name="price" value="{{ old('price') }}" required>
        </div>
        <div class="mb-3">
            <label for="image" class="form-label">Image</label>
            <input type="file" class="form-control" id="image" name="image" required>
        </div>
        <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" name="name" value="{{ old('name') }}" required>
        </div>
        <div class="mb-3">
            <label for="description" class="form-label">Description</label>
            <textarea class="form-control" id="description" name="description">{{ old('description') }}</textarea>
        </div>

        <!-- Product Options Section -->
        <div class="mb-3">
            <label class="form-label">Product Options</label>
            <div id="options-container">
                <!-- Options will be added here dynamically -->
            </div>
            <button type="button" class="btn btn-secondary" onclick="addOption()">Add Option</button>
        </div>
        <button type="submit" class="btn btn-primary">Add Product</button>
    </form>
</div>
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script>
$(document).ready(function() {
    function formatMerchant(merchant) {
        return merchant.text;
    }
    $('#merchant_id').select2({
        placeholder: 'Select Merchant',
        minimumInputLength: 1,
        ajax: {
            url: '{{ route('merchants.search') }}',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term,
                    page: params.page || 1
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;
                return {
                    results: data.results,
                    pagination: {
                        more: data.pagination.more
                    }
                };
            },
            cache: true
        },
        templateResult: formatMerchant,
        templateSelection: formatMerchant,
        allowClear: true
    });

    // Pre-populate if old value exists
    var oldMerchantId = '{{ old('merchant_id') }}';
    if (oldMerchantId) {
        $.ajax({
            url: '{{ route('merchants.search') }}',
            data: { q: '', page: 1 },
            dataType: 'json'
        }).then(function (data) {
            var found = data.results.find(function(item) { return item.id == oldMerchantId; });
            if (found) {
                var option = new Option(found.text, found.id, true, true);
                $('#merchant_id').append(option).trigger('change');
            } else {
                // If not found in first page, fetch directly
                $.ajax({
                    url: '{{ route('merchants.search') }}',
                    data: { q: oldMerchantId, page: 1 },
                    dataType: 'json'
                }).then(function (data2) {
                    if (data2.results.length > 0) {
                        var option = new Option(data2.results[0].text, data2.results[0].id, true, true);
                        $('#merchant_id').append(option).trigger('change');
                    }
                });
            }
        });
    }
});
</script>

<script>
let optionCounter = 0;

function addOption() {
    const container = document.getElementById('options-container');
    const optionDiv = document.createElement('div');
    optionDiv.className = 'option-field border p-3 mb-3';
    optionDiv.innerHTML = `
        <div class="row">
            <div class="col-md-3">
                <label class="form-label">Option Name</label>
                <input type="text" class="form-control" name="options[${optionCounter}][option_name]" placeholder="e.g., Spice Level" required>
            </div>
            <div class="col-md-2">
                <label class="form-label">Type</label>
                <select class="form-control" name="options[${optionCounter}][option_type]" required onchange="toggleOptionValues(this, ${optionCounter})">
                    <option value="radio">Radio</option>
                    <option value="checkbox">Checkbox</option>
                </select>
            </div>
            <div class="col-md-5">
                <label class="form-label">Values & Prices</label>
                <div class="option-values" id="option-values-${optionCounter}">
                    <div class="input-group mb-2">
                        <input type="text" class="form-control" name="options[${optionCounter}][option_values][0][value]" placeholder="Value (e.g., Spicy)" required>
                        <input type="number" step="0.01" min="0" class="form-control" name="options[${optionCounter}][option_values][0][price]" placeholder="Price" required>
                        <button type="button" class="btn btn-outline-secondary" onclick="addOptionValue(this, ${optionCounter})">+</button>
                    </div>
                </div>
            </div>
            <div class="col-md-1">
                <label class="form-label">Required</label>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="options[${optionCounter}][is_required]" value="1">
                    <label class="form-check-label">Yes</label>
                </div>
            </div>
            <div class="col-md-1">
                <label class="form-label">&nbsp;</label>
                <button type="button" class="btn btn-danger btn-sm" onclick="removeOption(this)">Remove</button>
            </div>
        </div>
    `;
    container.appendChild(optionDiv);
    optionCounter++;
}

function addOptionValue(button, optionIndex) {
    const valuesDiv = button.closest('.option-values');
    const count = valuesDiv.querySelectorAll('.input-group').length;
    const newGroup = document.createElement('div');
    newGroup.className = 'input-group mb-2';
    newGroup.innerHTML = `
        <input type="text" class="form-control" name="options[${optionIndex}][option_values][${count}][value]" placeholder="Value (e.g., Spicy)" required>
        <input type="number" step="0.01" min="0" class="form-control" name="options[${optionIndex}][option_values][${count}][price]" placeholder="Price" required>
        <button type="button" class="btn btn-outline-danger" onclick="removeOptionValue(this)">-</button>
    `;
    valuesDiv.appendChild(newGroup);
}

function removeOptionValue(button) {
    button.closest('.input-group').remove();
}

function removeOption(button) {
    button.closest('.option-field').remove();
}
</script>
@endpush