@extends('layouts.admin')

@section('content')
<div class="container">
    <h1>Edit 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.update', $product->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <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', $product->price) }}" required>
        </div>
        <div class="mb-3">
            <label for="image" class="form-label">Image</label><br>
            @if($product->image)
                <img src="{{ asset('storage/app/public/' . $product->image) }}" alt="{{ $product->name }}" width="120" class="mb-2">
            @endif
            <input type="file" class="form-control" id="image" name="image">
        </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', $product->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', $product->description) }}</textarea>
        </div>
        <div class="mb-3">
            <label for="merchant_id" class="form-label">Merchant</label>
            <select class="form-control" id="merchant_id" name="merchant_id" required>
                @foreach($merchants as $merchant)
                    <option value="{{ $merchant->id }}" {{ old('merchant_id', $product->merchant_id) == $merchant->id ? 'selected' : '' }}>{{ $merchant->business_name }}</option>
                @endforeach
            </select>
        </div>
        <!-- Product Options Section -->
        <div class="mb-3">
            <label class="form-label">Product Options</label>
            <div id="options-container">
                @foreach($product->options as $i => $option)
                    <div class="option-field border p-3 mb-3">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label">Option Name</label>
                                <input type="text" class="form-control" name="options[{{ $i }}][option_name]" value="{{ $option->option_name }}" required>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Type</label>
                                <select class="form-control" name="options[{{ $i }}][option_type]" required>
                                    <option value="radio" {{ $option->option_type == 'radio' ? 'selected' : '' }}>Radio</option>
                                    <option value="checkbox" {{ $option->option_type == 'checkbox' ? 'selected' : '' }}>Checkbox</option>
                                </select>
                            </div>
                            <div class="col-md-5">
                                <label class="form-label">Values & Prices</label>
                                <div class="option-values">
                                    @foreach($option->option_values as $j => $val)
                                        <div class="input-group mb-2">
                                            <input type="text" class="form-control" name="options[{{ $i }}][option_values][{{ $j }}][value]" value="{{ $val['value'] ?? $val }}" placeholder="Value (e.g., Spicy)" required>
                                            <input type="number" step="0.01" min="0" class="form-control" name="options[{{ $i }}][option_values][{{ $j }}][price]" value="{{ $val['price'] ?? 0 }}" placeholder="Price" required>
                                            <button type="button" class="btn btn-outline-danger" onclick="removeOptionValue(this)">-</button>
                                        </div>
                                    @endforeach
                                    <div class="input-group mb-2">
                                        <input type="text" class="form-control" name="options[{{ $i }}][option_values][{{ count($option->option_values) }}][value]" placeholder="Value (e.g., Spicy)">
                                        <input type="number" step="0.01" min="0" class="form-control" name="options[{{ $i }}][option_values][{{ count($option->option_values) }}][price]" placeholder="Price">
                                        <button type="button" class="btn btn-outline-secondary" onclick="addOptionValue(this, {{ $i }})">+</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[{{ $i }}][is_required]" value="1" {{ $option->is_required ? 'checked' : '' }}>
                                    <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>
                    </div>
                @endforeach
            </div>
            <button type="button" class="btn btn-secondary" onclick="addOption()">Add Option</button>
        </div>
        <button type="submit" class="btn btn-primary">Update Product</button>
    </form>
</div>
@push('scripts')
<script>
let optionCounter = {{ $product->options->count() }};
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]\" required>
            </div>
            <div class=\"col-md-2\">
                <label class=\"form-label\">Type</label>
                <select class=\"form-control\" name=\"options[${optionCounter}][option_type]\" required>
                    <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\">
                    <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
@endsection