@extends('main.layouts.app')

@section('content')

    <div class="card mt-4">
        <div class="container ">
            <div class="container mt-4">
                <h2>Add Variant for: {{ $product->product_title }}</h2>

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

                {{-- Validation Errors --}}
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

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

                <form action="{{ route('variants.store', $product->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row mb-3">
                        {{-- <div class="col-md-4">
                            <label>SKU</label>
                            <input type="text" name="sku" class="form-control" required value="{{ old('sku') }}">
                        </div> --}}

                        <div class="col-md-4">
                            <label>MRP Price</label>
                            <input type="number" name="mrp_price" step="0.01" class="form-control" required
                                value="{{ old('mrp_price') }}">
                        </div>

                        <div class="col-md-4">
                            <label>Sale Price</label>
                            <input type="number" name="price" step="0.01" class="form-control" required
                                value="{{ old('price') }}">
                        </div>

                        <div class="col-md-4">
                            <label>Stock</label>
                            <input type="number" name="stock" class="form-control" required value="{{ old('stock') }}">
                        </div>


                        <div class="form-group col-md-12 mt-2">
                            <label>Image*</label>
                            <input class="form-control form-control-sm" name="image[]" id="image" type="file"
                                accept="image/*" multiple>
                        </div>
                    </div>

                    <div class="row">
                        <div class="mb-4 col-md-12">
                            <label class="block text-slate-700 font-medium">Apply GST?</label>
                            <div class="flex space-x-4 mt-2">
                                <label class="inline-flex items-center">
                                    <input type="radio" name="apply_gst" value="no" checked
                                        class="form-radio text-blue-600"
                                        onclick="document.getElementById('gst-field').style.display='none'">
                                    <span class="ml-2">No</span>
                                </label>
                    
                                <label class="inline-flex items-center">
                                    <input type="radio" name="apply_gst" value="yes" class="form-radio text-blue-600"
                                        onclick="document.getElementById('gst-field').style.display='block'">
                                    <span class="ml-2">Yes</span>
                                </label>
                            </div>
                        </div>
                    
                        <div id="gst-field" class="mt-3" style="display: none;">
                            <label for="gst">GST (%)</label>
                            <input type="number" name="gst" id="gst" class="form-control form-control-sm"
                                placeholder="Enter GST %">
                        </div>
                        
                    </div>


                    <div class="row">
                        @foreach ($attributes as $index => $attribute)
                            <div class="col-md-4 mb-3">
                                <input type="hidden" name="attributes[{{ $index }}][attribute_id]"
                                    value="{{ $attribute->id }}">
                                <label>{{ $attribute->name }}</label>
                                <select name="attributes[{{ $index }}][value_id]" class="form-control">
                                    <option value="">Select {{ $attribute->name }}</option>
                                    @foreach ($attribute->values as $value)
                                        <option value="{{ $value->id }}"
                                            {{ old("attributes.$index.value_id", $attribute->selected_value_id ?? '') == $value->id ? 'selected' : '' }}>
                                            {{ $value->value }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        @endforeach
                    </div>


                    <button type="submit" class="btn btn-primary mt-3">Add Variant</button>
                </form>


                <hr>
                {{-- Existing Variants --}}
                <h3>Existing Variants</h3>
                @if ($product->variants->count() > 0)
                    <table class="table table-bordered" id="photos_table">
                        <thead>
                            <tr>
                                <th>SKU</th>
                                <th>MRP Price</th>
                                <th>Price</th>
                                <th>Stock</th>
                                <th>Attributes</th>
                                <th>Actions</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach ($product->variants as $variant)
                                <tr>
                                    <td>{{ $variant->sku }}</td>
                                    <td>{{ $variant->mrp_price }}</td>
                                    <td>{{ $variant->price }}</td>
                                    <td>{{ $variant->stock }}</td>
                                    <td>
                                        @foreach ($variant->values as $val)
                                            <strong>{{ $val->attribute->name }}:</strong> {{ $val->value->value }}<br>
                                        @endforeach
                                    </td>
                                    <td>

                                        <a href="{{ route('variant-edit', $variant->id) }}" class="btn btn-sm btn-primary">
                                            Edit
                                        </a>

                                        <a href="{{ route('variant-delete', $variant->id) }}"
                                            class="btn btn-sm btn-danger">
                                            Delete
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @else
                    <p>No variants added yet.</p>
                @endif
            </div>
        </div>
    </div>


    <script>
        document.querySelector('form').addEventListener('submit', function() {
            document.querySelectorAll('select[name*="[value_id]"]').forEach(function(select) {
                if (!select.value) {
                    // Remove both value_id and attribute_id inputs for empty selects
                    let index = select.name.match(/attributes\[(\d+)\]/)[1];
                    document.querySelector(`input[name="attributes[${index}][attribute_id]"]`).remove();
                    select.remove();
                }
            });
        });
    </script>
@endsection