@push('title')
    Update Variation
@endpush

<x-app-layout>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title mb-3">Update Variation</h5>
            <form action="{{ route('variations.update', ['id' => $variation->id]) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="row">
                    <div class="col-md-6">
                        <label for="name">Variation Name</label>
                        <input type="text" class="form-control" id="name" name="name" value="{{ $variation->name }}">
                    </div>
                    <div class="col-md-6">
                        <label for="status">Status</label>
                        <select class="form-control" id="status" name="status">
                            <option value="{{ \App\Models\Variation::ACTIVE }}" {{ $variation->status == \App\Models\Variation::ACTIVE ? 'selected' : '' }}>Active</option>
                            <option value="{{ \App\Models\Variation::INACTIVE }}" {{ $variation->status == \App\Models\Variation::INACTIVE ? 'selected' : '' }}>Inactive
                            </option>
                        </select>
                    </div>
                    <div class="col-md-12 text-end">
                        <button type="button" id="add-type" class="btn btn-sm btn-secondary mt-2">
                            + Add Another Type
                        </button>
                    </div>
                    
                </div>
                <div class="row mt-3">
                    <div class="col-md-12">
                        <label class="mb-2">Variation Types</label>
                        <div id="variation-types-wrapper">
                            @foreach ($variation->variationTypes as $type)
                                <div class="input-group mb-2 variation-type-row">
                                    <input type="hidden" name="types[{{ $type->id }}][id]" value="{{ $type->id }}">
                                    <input type="text" class="form-control" name="types[{{ $type->id }}][name]" value="{{ $type->name }}" required>
                                    <button type="button" class="btn btn-icon btn-danger" data-bs-toggle="modal"
                                        data-bs-target="#deleteTypeModal-{{ $type->id }}">
                                        <i class="bx bx-trash"></i>
                                    </button>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="text-end mt-4">
                    <button type="submit" class="btn btn-primary">Update Variation</button>
                    <a href="{{ route('variations') }}" class="btn btn-outline-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>

    {{-- Delete Modals outside the main form --}}
    @foreach ($variation->variationTypes as $type)
        <div class="modal fade" id="deleteTypeModal-{{ $type->id }}" tabindex="-1" aria-hidden="true">
           <div class="modal-dialog modal-simple modal-enable-otp modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body text-center">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        <h3>Warning</h3>
                        <p class="mt-3">Are you sure you want to delete this variation type?</p>
                        <p class="fw-bold">Type: {{ $type->name }}</p>
                        <p class="text-danger"><strong>This action cannot be undone!</strong></p>
                        <div class="d-flex justify-content-center gap-2 mt-4">
                            <form action="{{ route('variations.delete-type', ['id' => $type->id]) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger">Yes, Delete</button>
                            </form>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach

</x-app-layout>

<script>
    $(document).ready(function () {
        let newTypeIndex = 0;

        $('#add-type').click(function () {
            const wrapper = $('#variation-types-wrapper');
            const newRow = `
                <div class="input-group mb-2 variation-type-row">
                    <input type="hidden" name="new_types[${newTypeIndex}][id]" value="">
                    <input type="text" class="form-control" name="new_types[${newTypeIndex}][name]" placeholder="Enter new type name" required>
                    <button type="button" class="btn btn-icon btn-danger remove-type">
                        <i class="bx bx-trash"></i>
                    </button>
                </div>
            `;
            wrapper.append(newRow);
            newTypeIndex++;
        });

        $(document).on('click', '.remove-type', function () {
            $(this).closest('.variation-type-row').remove();
        });
    });
</script>